FSCSS v1.1.15 introduces a powerful new feature @define.
It allows developers to create reusable CSS blocks and property groups directly inside FSCSS, making styles more modular and easier to maintain.
What is @define?
"@define" lets you declare reusable style definitions that can be injected anywhere in your stylesheet.
Think of it as a lightweight system for generating reusable CSS.
Example:
@define flex-center(){
display:flex;
justify-content:center;
align-items:center;
}
.box{
@flex-center()
}
Output CSS:
.box{
display:flex;
justify-content:center;
align-items:center;
}
Parameter Support
Defines can also accept parameters with optional default values.
Example:
@define card(bg:black, color:white, pad:20px, bd-r:10px){
background:@use(bg);
border-radius:@use(bd-r);
padding:@use(pad);
color:@use(color);
}
Usage:
.box{
@card(#007999)
}
Output:
.box{
background:#007999;
border-radius:10px;
padding:20px;
color:white;
}
Block Defines
Defines can also generate full CSS blocks such as media queries or animations.
Example:
@define screen(size){"
@media(max-width:@use(size)){
.box{
padding:10px;
}
}
"}
Usage:
@screen(750px)
This allows FSCSS to generate larger CSS structures in a reusable way.
Real Plugin Example
The new feature already powers FSCSS plugins like Counterx, a lightweight percentage counter animation generator.
Example:
@keyframes count {
@counter-init()
}
Counterx automatically generates keyframes from 0% to 100% using FSCSS arrays and the new @define system.
Why @define?
The goal of FSCSS is to keep CSS generation simple while reducing repetition.
The new define system helps developers:
• Create reusable utilities
• Build modular style systems
• Write less repetitive CSS
• Extend FSCSS with plugins
Example Combined
@define flex-center(){
display:flex;
justify-content:center;
align-items:center;
}
@define card(bg:black, color:white){
background:@use(bg);
color:@use(color);
padding:20px;
border-radius:10px;
}
.box{
@card(#007999)
@flex-center()
}
Learn More
https://fscss.devtem.org/define
Top comments (0)