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

• 📘 Full FSCSS Docs

• 📦 npm install fscss

• 🌐 ekumedia.netlify.app

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

🙌 Credits

Writer: David-Hux
Publisher: Figsh
Series Host: You, the user 🚀

➡️ Next up: We’ll dive into FSCSS variables, dynamic gradients, and mx() shorthand. Stay tuned and follow the series!

Drop a comment if you’ve built something with FSCSS!