FSCSS Documentation

A comprehensive guide to the Figured Shorthand CSS preprocessor

What is FSCSS?

FSCSS (Figured Shorthand CSS) is a lightweight, modern CSS preprocessor that simplifies your styling workflow with intuitive shorthand syntax. It allows you to write cleaner, more maintainable stylesheets with less code.

Fast Development

Write CSS 50% faster with intuitive shorthand syntax

Clean Code

Reduce repetition with variables, plugins, and functions

Powerful Features

Advanced capabilities like conditional logic, reusable blocks and loops

Join the Community

FSCSS thrives on community contributions. Whether you're reporting bugs, suggesting features, or contributing — your help is valued.

Join Discussions

Share ideas, ask questions, and connect with other FSCSS users

 GitHub Discussions

Contribute

Help improve FSCSS by contributing code, plugins, or documentation

Contributing Guide

Found FSCSS helpful? Sponsor or Star us on GitHub!

Star on GitHub

Installation

NPM Installation

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

bash 
npm install fscss@latest

For global CLI usage:

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

CDN Usage

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:

HTML 
<link type="fscss" href="/style.fscss">
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.0/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() yourself when you're ready:

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

xfscss.reboot();

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

Quick Start

Your First FSCSS File

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

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

/* Create a button style */
.btn {
  background: $primary-color;
  color: white;
  padding: 12px 24px;
  border-radius: $border-radius;
  transition: all 0.3s ease;
}

Compile it to CSS:

bash 
fscss style.fscss style.css

The resulting CSS will be:

CSS 
.btn {
  background: #2563eb;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

Variables & Style Stores

Defining Variables

FSCSS allows you to define variables for reusable values:

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

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

Style Stores

Style stores allow you to group related properties:

FSCSS 
/* 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;
}

Define reusable block

@define since v1.1.15

Create reusable, parameterized style definitions for modular CSS architecture:

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

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

Sponsors & Supporters

Our Supporters

Ready to try FSCSS?

Start simplifying your CSS workflow today with our powerful preprocessor.

Install via NPM View Examples