⚡ 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 compil