One thing about FSCSS is that you can define your own functions… inside your styles. Here’s a simple example of how that works.
Custom randint Function
@define randint(array){
@random(@use(array))
}
What this function does:
- Takes an array as an argument.
- Returns a random value directly from that array.
Step 1: Defining Arrays
First, we set up our possible values:
@arr sizes[ 100px, 150px, 200px ]
Step 2: Using the Function
We call our custom function and assign it to a variable:
$height: @randint(@arr.sizes);
Now $height dynamically becomes either 100px, 150px, or 200px (randomly selected at compile).
Why This Is Interesting
- Reusable Logic: You can create complex logic once and use it across your entire design system.
- Dynamic Design Systems: Build layouts that feel organic and varied rather than static and repetitive.
Example Usage
Applying that logic to a class is straightforward:
.box {
height: $height;
width: $height;
background: #2c5364;
}
Every compile can produce a slightly different UI!
https://www.npmjs.com/package/fscss