Variable in FSCSS

#fscss #css #javascript #tutorial

Getting Started with FSCSS

FSCSS (Figured Shorthand CSS) is a lightweight CSS preprocessor designed to make writing styles faster, more expressive, and more compact. It allows developers to use shorthand syntax, variables, and even natural-language prompts that compile into valid CSS.

Key Points

Implementation: Include FSCSS runtime via CDN for testing:

   <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.7/e/exec.min.js" defer></script>
   <style>
     // test FSCSS here
   </style>

Variables ($): Store and reuse values like colors, fonts, or layout properties.

   $font-stack: Helvetica, sans-serif;
   $init-color: #333;

   body {
     font: 100% $font-stack!;
     color: $init-color!;
   }

Prompt Variables (str()): Store text-based prompts as style snippets.

   str(my card style, "background: #fff; border-radius: 8px; padding: 16px;")

   .card {
     my card style
   }

Function Blocks (@fun): Create reusable sets of CSS properties.

   @fun(card) {
     border: 1px solid #ccc;
     padding: 20px;
     background: white;
   }

   .card { @fun.card }
   .box { @fun.card.border }
   .grid { property: @fun.card.border.value; }

Compilation: FSCSS automatically converts shorthand and prompts into standard CSS either at runtime (client-side) or via CLI (run your_file.fscss your_file.css).

Example Use Case

Developers building interactive, animation-heavy, or AI-generated web interfaces can use FSCSS to rapidly define and reuse styles with fewer lines of code.

Summary Table

Feature	Purpose
`$()`	Define variables
`str()`	Create text-based style prompts
`@fun()`	Reusable CSS function blocks
`exec()`	Runtime compilation
`!`	Force variable evaluation