Introducing FSCSS (Figured Shorthand Cascading Style Sheet)

FSCSS (Figured Shorthand Cascading Style Sheets) is a lightweight, modern CSS preprocessor that lets you write shorter, more expressive, and more programmable stylesheets — while compiling down to plain, standard CSS.

It was conceived in 2022. The project is now production-ready (v1.2.0 as of September 2026) and available on npm, with a browser runtime, CLI compiler, VS Code extension, and a growing module ecosystem.

---

Why FSCSS?

Plain CSS is powerful, but it gets repetitive fast. FSCSS was designed to solve that pain by adding:

• Shorthand syntax for common patterns
• Reusable parameterized blocks (@define)
• Semantic pattern matching (pattern())
• Conditional logic (@event)
• Arrays & generation (@arr)
• Functions & utilities (@fun, num(), copy(), rpt(), etc.)

The compiled output is always standard CSS — no runtime dependency required in production.

---

Core Features at a Glance

1. Variables & Style Stores

$primary-color: #2563eb;
$border-radius: 8px;

.btn {
  background: $primary-color!;
  border-radius: $border-radius!;
}

2. Reusable Blocks with @define

@define card(bg: black, color: white, pad: 20px) {
  background: @use(bg);
  color: @use(color);
  padding: @use(pad);
  border-radius: 10px;
}

.box {
  @card(#007999)
}

3. Semantic Pattern Matching (pattern()) — New in v1.1.25

Describe styles in plain English. FSCSS matches by similarity:

pattern(0.5: "Hello World card", `
  border-radius: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
`)

.card {
  hello world card
}

4. Arrays & Automatic Generation

Generate hundreds of utility classes in a few lines:

@arr radius[count(200)]

.radius-@arr.radius[] {
  border-radius: @arr.radius[]px;
}

5. Conditional Logic with @event

@event theme(mode) {
  if mode:dark {
    return: #1a1a1a;
  }
  el {
    return: #f8f8f8;
  }
}

6. Function Stores (@fun)

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

.card {
  @fun.card-style
}

---

Installation

NPM (Recommended)

# Project dependency
npm install fscss@latest

# Global CLI
npm install -g fscss

Compile a file:

fscss style.fscss style.css

Browser (CDN Runtime)

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

Or use the ESM build for more control:

import xfscss from "https://cdn.jsdelivr.net/npm/fscss@latest/esm.min.js";
xfscss.reboot();

---

VS Code Extension

Official support is available on the Visual Studio Marketplace:

FSCSS Support by Figsh

Features include:

• Full syntax highlighting for .fscss / .xfscss
• Powerful snippets (def, fun, arr, pattern, etc.)
• Compile current file / Auto-compile on save
• Custom language icon

---

Ecosystem & Modules

FSCSS has a growing set of pure-CSS modules built on top of it:

• st-core.fscss — Charts & dashboards (no Chart.js)
• form.fscss — Modern forms with floating labels
• circle-progress.fscss — Smart progress rings
• customizable.fscss — Page shells, heroes, typography
• cube.fscss — Real CSS 3D cubes

See more modules at the FSCSS modules portal.

---

Official Links

Resource	Link
Documentation	fscss.devtem.org
Full Docs	fscss.devtem.org/docs
npm Package	npmjs.com/package/fscss
GitHub	github.com/Figsh/xfscss
VS Code Extension	marketplace.visualstudio.com
DEV Community	dev.to/fscss

---

FSCSS sits in a sweet spot: more powerful, lighter and more CSS-native, and designed for both rapid prototyping (CDN) and production (CLI → zero-runtime CSS).

If you’re tired of writing the same declarations over and over, or you want to generate large utility systems and component libraries with minimal code, FSCSS is worth trying.

Write less. Ship real CSS.

---

License: MIT