⚡ Creating Custom Functions in FSCSS (Yes, CSS Can Do This)

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!

npmjs.com