In FSCSS (Figured Shorthand CSS), reusable blocks and micro-helpers are built with @define . A definition is a compile-time blueprint: parameters go in, @use(...) substitutes them, and the compiler emits normal CSS. You can keep that blueprint in a helpers file, import it into a page stylesheet, rename it, and call it like a local shorthand.

That pipeline is easy to mock: “All that ceremony for a box-shadow and some padding?” Fair question. Below is the minimal protocol, then why it exists when the output stays simple on purpose.

Step 1 — Define a micro

In something like helpers.fscss :

@define elevate ( space : 12px ) { box-shadow : 0 @ use ( space ) 20px rgba ( 0 , 0 , 0 , 0.1 ); padding : @ use ( space ); }

Enter fullscreen mode

Exit fullscreen mode

Default space is 12px .…