DEV Community

Cover image for How It Feels After FSCSS v1.1.15 Introduced "@define"
FSCSS tutorial
FSCSS tutorial

Posted on

How It Feels After FSCSS v1.1.15 Introduced "@define"

#css #webdev #fscss #javascript

When FSCSS v1.1.15 introduced @define, it quietly changed how to write CSS.

Before this update, FSCSS already had powerful features—arrays, generators, shorthand methods, and dynamic utilities. But @define adds something deeper:

Reusable style functions.

Not just utilities…
actual programmable styles.

Reusable Style Functions

With @define, you can create reusable style blocks and apply them anywhere.

Example:

@define center(elem){
  @use(elem){`
    display:flex;
    justify-content:center;
    align-items:center;
  `}
}
Enter fullscreen mode Exit fullscreen mode

Usage:

@center(.box)
Enter fullscreen mode Exit fullscreen mode

Result:

.box{
  display:flex;
  justify-content:center;
  align-items:center;
}
Enter fullscreen mode Exit fullscreen mode

Instead of rewriting the same styles again and again, you define them once and reuse them anywhere.

Styles With Parameters

"@define" also supports parameters: @define name(a,b,...){...}, making it even more powerful.

Example:

@define btn(color:#6366f1){
  padding:10px 16px;
  background: @use(color);
  color:white;
  border-radius:6px;
}
Enter fullscreen mode Exit fullscreen mode

Usage:

.button{
  @btn(#ff4d4d)
}
Enter fullscreen mode Exit fullscreen mode

This makes styles customizable without repeating code.

Why This Changes Everything

This feature makes FSCSS feel like?.

You can now:

  • Build reusable style systems
  • Create configurable utilities
  • Write cleaner and shorter stylesheets
  • Maintain large design systems more easily

And the best part:

You can build your own plugins.

Real FSCSS Tools Built With @define

Some tools already use this concept.

Circle Progress

A simple dynamic circular progress component.

GitHub:
https://github.com/Figsh/Circle-progress.fscss/

CounterX

A counter utility for generating counting animation.

GitHub:
https://github.com/Figsh/counterx.fscss/

Icon Mask

An icon system built with mask-based SVG icons and reusable functions.

Using @define, you can create entire icon frameworks in very little CSS.

In fact, you can build icon system in less than 60 lines of FSCSS.

But after compiling, the output CSS could be hundreds of lines.

That is the power of reusable style logic.

@define makes FSCSS more than just shorthand CSS.

It allows developers to build:

  • plugins
  • reusable UI systems
  • design utilities
  • component generators

All directly inside the stylesheet.

And that’s when it really clicks:

It’s becoming a style automation language.

If you're curious, try building your own reusable functions with "@define".

You might end up writing 10 lines of FSCSS that generate 200 lines of CSS.

And honestly…

That feels pretty good.
pen

Top comments (0)