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 $R() method or CSS :root Pseudo. Here’s an example:
FSCSS SYNTAX
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
})
body {
font: 100% $font-stack!;
color: $primary-color!;
}
In CSS :root pseudo
: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
Top comments (0)