FSCSS variables

First implement FSCSS to your Web project:

<script src='https://combinatronics.io/Figsh/FSCSS/refs/heads/4.0.1/fscss_exec.js' async=""></script> 
<style FSCSS>
//test FSCSS
</style>

FSCSS Variables:
Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. FSCSS uses the $ symbol to make something a variable using the FSCSS $ method. Here’s an example:

FSCSS4 SYNTAX

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack!;
  color: $primary-color!;
}

Using CSS :root pseudo : FSCSS3 SYNTAX

:root body{
$bg: red, linear-gradient(blue, green);
$color: #00f0f0;
}
Body{ background: $bg!;
Color: $color!;
} 

When the FSCSS is processed, it takes the variables we define above and outputs normal CSS with our variable values placed in the CSS.
💖
Follow up

FSCSS tutorials Follow

Figured Shorthand Cascading Style Sheet