DEV Community

FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on

FSCSS Functions Guide – Dynamic, Smart & Reusable CSS

🚀 FSCSS Functions — Make Your CSS Smarter, Faster & Dynamic

What Are FSCSS Functions?

FSCSS (Figured Shorthand CSS) extends normal CSS with powerful function-like abilities. You can reuse values, run calculations, generate random styles, and create dynamic layouts.

1. @fun — Reusable Value Collections

Create grouped reusable values, perfect for themes or design tokens.

@fun(theme){
  primary: #3b82f6;
  danger: #ef4444;
}

.btn {
  background: @fun.theme.primary.value;
}
Enter fullscreen mode Exit fullscreen mode
  1. @random — Dynamic Variations

Generate different styles per compile — for creative and fun UI effects.

@arr(colors[#3b82f6, #8b5cf6, #10b981]);

.box {
  background: @random([@arr.colors(,)]);
}
Enter fullscreen mode Exit fullscreen mode
  1. num() — Run Math Directly in CSS

Calculate values without switching to JavaScript.

$base: 16;

title {
  font-size: num($base! * 1.5)px;
}
Enter fullscreen mode Exit fullscreen mode
  1. Utility Functions

copy()

color: copy(4, primary-color);
Enter fullscreen mode Exit fullscreen mode

length()

width: num(length("Hello") * 10)px;
Enter fullscreen mode Exit fullscreen mode

count()

@arr(nums[count(5)]); // [1,2,3,4,5]
Enter fullscreen mode Exit fullscreen mode

Why Developers Love FSCSS functions

· Reusable design systems
· Fewer repeated styles
· Dynamic & logic-driven CSS
· Cleaner, more expressive syntax

FSCSS Functions level up your CSS workflow by adding logic and dynamic power. Once you start using them, traditional CSS will feel limited.

Full guide @ https://fscss.devtem.org

Top comments (0)