FSCSS @define Reusable CSS Blocks

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 : wh