FSCSS Randomness, Arrays, and Better control

Some powerful features that make styling more dynamic and expressive.

Random value generation using arrays.

---

@random() — True Random Selection

FSCSS allows selecting a random value from an array using @random().

Example:

@arr colors[#1E2783, #8C29B2, #C41348]

body{
  background:@random(@arr.colors);
}

h1{
  background:@random(@arr.colors);
}

h2{
  background:@random(@arr.colors);
}

Each call to @random() is independent, meaning every selector can receive a different value.

Possible compile result:

body{ background:#8C29B2; }
h1{ background:#1E2783; }
h2{ background:#C41348; }

And on the next compile (or page reload if used CDN), the results may change again.

---

Inline Arrays

You can also use inline arrays directly inside @random().

border-width:@random([1,2,3])px;

Possible outputs:

1px
2px
3px

This makes it easy to quickly introduce variation into styles.

---

array!.randint — One Random Value Per Compile

FSCSS also provides a different behavior using:

array!.randint

Example:

@arr colors[red, blue, green]

h1{
  color:@arr.colors!.randint;
}

h2{
  color:@arr.colors!.randint;
}

body{
  color:@arr.colors!.randint;
}

In this case, one random value is selected for the entire compile.

Example result:

h1{ color:red; }
h2{ color:red; }
body{ color:red; }

On the next compile, it may change:

h1{ color:blue; }
h2{ color:blue; }
body{ color:blue; }

---

Why This Matters

These two behaviors allow different design strategies:

Global random theme

@arr.colors!.randint

Entire UI gets one random color.

Randomized UI elements

@random(@arr.colors)

Each element gets a different color.

---

Small Features, Big Possibilities