FSCSS Documentation

npm install fscss
npm install -g fscss
fscss input.fscss output.css

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" defer></script>

import xfscss from "https://cdn.jsdelivr.net/npm/fscss@1.2.6/esm.min.js";
                // const css = await xfscss.process("fscss code");

Same language everywhere: CLI, IDE, and CDN. Production sites should prefer compiled CSS, not the browser runtime.

Focused pages for advanced FSCSS features used in modules

• Loops — @arr, auto-index, rpt(), inline(), empty{ /* preserve */ }
• num() & count() — compile-time math, index sequences, <> grouping
• Arrays · Array methods — ! methods, derived arrays, mutations
• str() — style stores; camelCase / snake_case property maps
• Nested loops · pattern() · @define · Shorthands 1.2.5

Hub & modules: hub.devtem.org · Libraries

Install FSCSS via NPM for use in Node.js projects or build pipelines:

npm install fscss@latest

For global CLI usage:

npm install -g fscss
fscss input.fscss output.css

From v1.2.0 onward, FSCSS ships two public entry points instead of the old internal files (/e/exec.js, /exec.js, /xfscss.js, etc.). Use one or the other, never both — the npm package and CLI usage are unchanged, and every v1.1.x method still works.

runtime.js — for plain HTML pages. It auto-scans your page and runs automatically:

<link type="fscss" href="/style.fscss">
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" async></script>

esm.js — for module-based use (e.g. an FSCSS-to-CSS tool, or manipulating styles without auto-running on the page). It never auto-runs and never touches page loading, so call xfscss.reboot() if there is fscss to scan and compile in the main page:

import xfscss from "https://cdn.jsdelivr.net/npm/fscss@1.2.6/esm.min.js";

xfscss.reboot();

Both builds expose the same API (API docs): run, inline, process, assign, exec, reboot.

Create a file named style.fscss with the following content:

/* Define variables */
$primary-color: #2563eb;
$border-radius: 8px;

/* Create a button style */
.btn {
  bg: $primary-color;
  color: white;
  px: 12px;
  py: 24px;
  rounded: $border-radius;
  transition: all 0.3s ease;
  size: 100% 200px;
}

Compile it to CSS:

fscss style.fscss style.css

The resulting CSS will be:

.btn {
  background: #2563eb;
  color: white;
  padding-right: 12px;
  padding-left: 12px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 100%;
  height: 200px;
}

Axis spacing, radius, size, and color aliases expand to standard properties:

/* FSCSS 1.2.5 – 1.2.6+ */
.card {
  bg: #fff;
  px: 15px;
  py: 10px;
  rounded: 8px;
}

Full list: Shorthands reference. Layout helpers also include stack, hstack, center, size, ratio-fit, and more.

FSCSS allows you to define variables for reusable values:

/* Basic variables */
$primary-color: #2563eb;
$font-size: 16px;
$spacing: 1rem;

/* Using variables */
.header {
  bg: $primary-color;
  fs: $font-size;
  padding: $spacing;
}

Style stores allow you to group related properties:

/* Define a style store */
@fun(card-style){
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

/* Apply the stored */
.card {
  @fun.card-style
  border: 1px solid #e2e8f0;
}

Create reusable, parameterized style definitions for modular CSS architecture:

/* Define card */
@define card(bg, color){
    background: @use(bg);
    color: @use(color);
}

/* Reuse card */
.card {
  @card(#007999, #dddddd)
}