🔁 FSCSS rpt() and re(): Repeating Styles Intelligently

Learn how FSCSS uses rpt() to repeat strings and re() to replace them, making CSS smarter and faster to write.

---

Welcome to Part 2 of our FSCSS series!

In this post, we’ll explore the rpt() and re() methods introduced in FSCSS v1.1.6 — designed to repeat values and replace tokens efficiently in your CSS workflow.

---

What Is rpt()?

rpt(count, text) is a shorthand function that repeats any string a given number of times.

It's especially useful for repeating numbers, symbols, or classnames without writing them manually.

---

🧪 Example: Repeat and Replace in One Shot

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" async></script>

<h2></h2>

<style>
/* Repeat '100 ' thirteen times and assign to $no */
$no: " RPT(13, '100 ')";

/* Replace 'Text' with 'content' */
Re(Text, 'content')

H2:before {
  Text: $no!;
}
</style>

Output:

h2::before {
  content: 100 100 100 100 100 100 100 100 100 100 100 100 100;
}

---

Use Cases for rpt() in CSS

• ⏱ Repeating animations or delays

• Multiplying numeric values like 100, 1em, or --var1

• Repeating icon symbols or decorative elements

---

Combined Power with re()

re(search, replace) lets you rename or substitute style keywords, enabling you to define patterns like:

Re(title-color: "#f55")
Re(Text, 'content')

Combined with rpt(), you can generate large sections of repeated or themed styles with just a few lines.

---

Try It in One Line

Just add this to your HTML:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" async></script>

Then use FSCSS directly inside your <style> tags. No build step required!

---

🌐 FSCSS Resources

• 📦 npm install fscss

• 🌐 fscss.devtem.org

Previous post: Intro to copy() and re() →

---

FSCSS version 1.1.22 available