# 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
```fscss
$primary-color: #2563eb;
$border-radius: 8px;

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

### 2. Reusable Blocks with `@define`
```fscss
@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:
```fscss
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:
```fscss
@arr radius[count(200)]

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

### 5. Conditional Logic with `@event`
```fscss
@event theme(mode) {
  if mode:dark {
    return: #1a1a1a;
  }
  el {
    return: #f8f8f8;
  }
}
```

### 6. Function Stores (`@fun`)
```fscss
@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)
```bash
# Project dependency
npm install fscss@latest

# Global CLI
npm install -g fscss
```

Compile a file:
```bash
fscss style.fscss style.css
```

### Browser (CDN Runtime)
```html
<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:
```js
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](https://marketplace.visualstudio.com/items?itemName=Figsh.fscss)** 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](https://fscss.devtem.org/libraries).

---

## Official Links

| Resource | Link |
|---------|------|
| Documentation | [fscss.devtem.org](https://fscss.devtem.org) |
| Full Docs | [fscss.devtem.org/docs](https://fscss.devtem.org/docs) |
| npm Package | [npmjs.com/package/fscss](https://www.npmjs.com/package/fscss) |
| GitHub | [github.com/Figsh/xfscss](https://github.com/Figsh/xfscss) |
| VS Code Extension | [marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Figsh.fscss) |
| DEV Community | [dev.to/fscss](https://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