DEV Community

FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on • Edited on

FSCSS variables

#fscss #webcomponents #programming #javascript

First implement FSCSS to your Web project:

<script src='https://cdn.jsdelivr.net/npm/fscss@1.1.2/exec.js' async=""></script> 
<style FSCSS>
//test FSCSS
</style>
Enter fullscreen mode Exit fullscreen mode

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:

FSCSS SYNTAX

$font-stack: Helvetica, sans-serif;
$init-color: #333;
body {
  font: 100% $font-stack!;
  color: $init-color!;
}
Enter fullscreen mode Exit fullscreen mode

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 image

FSCSS tutorial

Figured Shorthand Cascading Style Sheet

Top comments (0)