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:
```scss
.box {
height: $height;
width: $height;
background: #2c5364;
}
Every compile can produce a slightly different UI!
https://www.npmjs.com/package/fscss