DEV Community

FSCSS tutorials for FSCSS tutorials

Posted on • Edited on

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

FSCSS4 SYNTAX

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

Using CSS :root pseudo : FSCSS3 SYNTAX

:root body{
$bg: red, linear-gradient(blue, green);
$color: #00f0f0;
}
Body{ background: $bg!;
Color: $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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more