Building 200+ CSS Utility Classes in 6 Lines with FSCSS 🤯

One of the fun things about FSCSS is how easily you can generate large utility systems without writing repetitive CSS.

Instead of manually creating dozens or hundreds of classes like:

.radius-1 { border-radius:1px; }
.radius-2 { border-radius:2px; }
.radius-3 { border-radius:3px; }
/* ... */
.radius-200 { border-radius:200px; }

FSCSS can generate all of them automatically.

Let's look at a simple example.

---

The Setup

First include the FSCSS CDN:

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

Now we can write FSCSS directly inside <style>.

---

Generate 200 Border Radius Utilities

@arr radius[count(200)]

[e-mail][]{
  border-radius: @arr.radius[]px;
}

That's it.

Just two lines of logic.

---

What This Generates

FSCSS will automatically compile it into something like this:

.radius-1 { border-radius:1px; }
.radius-2 { border-radius:2px; }
.radius-3 { border-radius:3px; }
.radius-4 { border-radius:4px; }

/* ... */

.radius-200 { border-radius:200px; }

You just created 200 utility classes instantly.

---

Creating Padding Utilities

You can repeat the same idea for padding:

@arr padding[count(200)]

[e-mail][]{
  padding: @arr.padding[]px;
}

Now you have:

.padding-1
.padding-2
.padding-3
...
.padding-200

All generated automatically.

---

Example Usage

<div class="card radius-25 padding-30">
  <h3>Hello World</h3>
</div>

With a simple card style:

.card{
  background: rgba(48, 56, 145, 1);
  %2(width, height [:200px;])
  color:#ddd;
}

Result:

• radius-25 → border-radius:25px
• padding-30 → padding:30px

---

Why This Is Useful

Utility systems like this normally require huge CSS files.

But FSCSS lets you generate them dynamically using logic like:

arrays
loops
functions
macros
imports

Which means you write logic instead of repetition.

---

The Crazy Part

You can scale this even further.

Example:

@arr size[count(1000)]

Now you can generate 1000 spacing utilities instantly.

---

Instead of writing CSS line by line, FSCSS lets you design CSS generators.

Things like:

utility frameworks

design systems

component libraries

reusable style functions

All become easier.

---

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

<style >
 @arr radius[count(200)]

[e-mail][]{
  border-radius: @arr.radius[]px;
}

 @arr padding[count(200)]

[e-mail][]{
  padding: @arr.padding[]px;
}


.card{
  background: rgba(48, 56, 145, 1);
  margin: 10px;
  %2(width, height [: 200px;]) 
  color: #ddd;
}

</style>

<div class="card radius-25 padding-30">
  <h3>Hello World</h3>
</div>


<div class="card radius-15 padding-20">
  <h3>Hello World</h3>
</div>

<div class="card radius-40 padding-55">
  <h3>Hello World</h3>
</div>

---