Live Examples

See FSCSS in action with these interactive examples that showcase its powerful shorthand syntax:

Event Functions & Conditional Logic

v1.1.6

FSCSS allows you to create functions with conditional logic that can be called directly in your styles. This example shows a responsive scaling function that adjusts sizes based on input values.

FSCSS 
@event scaleSize(e) {
  if e >= 8 { 
    return: num(8*2)em
    exec(_log, ">=8: Scaling to 16em for optimal readability");
    /* Caps at 16em for larger inputs */
  }
  el-if e < 8 { 
    return: num(8/5*8)em
    exec(_log, "< 8: Scaling to ~10.24em for compact views");
    /* Scales down to ~10.24em for smaller inputs */
  }
  el { 
    return: num(8)em
    exec(_warn, "No match: Using default 8em – check your input value");
    /* Default fallback */
  }
}

.card {
  width: @event.scaleSize(8);   /* Outputs 16em */
  height: @event.scaleSize(7);  /* Outputs ~10.24em */
  transition: all 0.3s ease;    /* Smooth it out */
}

This card uses:

width: 16em

height: 10.24em

Imports & Shorthand Properties

v1.1.6

FSCSS supports imports for shared code and provides powerful shorthand properties. This example demonstrates theme imports and the %2 shorthand for setting width and height.

FSCSS 
@import(exec(_init themes))

div {
  %2(width, height[: 200px;])  /* Sets both width and height to 200px */
  background: red;
  clip-path: @event.shape(star);
}

Array loops

v1.1.6

Arrays in FSCSS let you loop through values like colors or heights without repeating code. In this example we build three arrays and use nth-child() to style each section differently in one go.

FSCSS 
/* arrays for height and background */
@arr heights[60px, 50px, 30px, 20px, 10px]
@arr colors[#00FF00, #FFFF00, #FFFFFF, #00FFF9, #D5D5D5]

/* helper array for indexes */
@arr index[count(5,1)]

/* loop through indexes */
.section div:nth-child(@arr.index[]) {
  /* capture current index */
  $index: @arr.index[];

  /* log the indexes on the console */
  exec(_log, $index!)

  /* apply styles based on index */
  background: @arr.colors[$index!];
  height: @arr.heights[$index!];
}

Why FSCSS?

FSCSS provides powerful tools to streamline your CSS development process:

Lightning Fast

Write complex CSS with significantly less code using intuitive shorthand syntax.

  • 50% less code than traditional CSS
  • Faster development cycles
  • Simplified maintenance

Reusable Patterns

Create reusable style patterns with variables, mixins, and style stores.

  • DRY (Don't Repeat Yourself) principles
  • Consistent design system
  • Easy global updates

Powerful Features

Advanced capabilities like value repetition, extraction, and automatic prefixing.

  • rpt() for repeating values
  • copy() for value extraction
  • Automatic vendor prefixing

Install FSCSS

Latest Version 1.1.11 up

Choose your preferred installation method:

Install via NPM

For Node.js projects, build pipelines, or CLI usage

bash 
npm install fscss@latest

Global CLI usage:

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

CDN Link

For quick integration in HTML files (runtime mode)

HTML 
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.11/exec.min.js" defer></script>
View on npm

Usage Guide

Learn how to integrate FSCSS into your projects:

Option 1: Backend / CLI

Compile FSCSS into plain CSS directly from your backend or in build scripts. Ideal for large-scale or production projects.

bash 
npm install -g fscss
fscss style.fscss style.css

✅ Node.js API Example:

JavaScript 
import { processFscss } from "fscss";
import { readFileSync, writeFileSync } from "fs";

const input = readFileSync("style.fscss", "utf-8");
const output = await processFscss(input);
writeFileSync("style.css", output);

💡 React.js (Build-Time Compilation):

  1. Compile FSCSS before bundling fscss src/styles/style.fscss src/styles/style.css
  2. 2️⃣ Import generated CSS in React
React Example 

import './styles/style.css';
export default function App() {
  return (
    <div className="box-container">
      <div className="box"></div>
      <div className="box"></div>
    </div>
  );
}

Option 2: Using HTML <link> and CDN

Include your FSCSS file and load the runtime compiler via CDN. Perfect for rapid prototyping or dynamic web demos.

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

⚡ Quick Inline Example:

HTML 
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.11/exec.min.js" defer></script>
<style>
  @import(exec(style.fscss));
</style>

Option 3: Using exec() in JavaScript

Import the exec() runtime method from the FSCSS CDN and run it programmatically.

JavaScript 
import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.11/e/xfscss.min.js";

new exec({
  type: "URL",
  content: "style.fscss"
});

💡 React Runtime Example:

React (Browser Runtime) 
import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/fscss@1.1.11/exec.min.js";
    script.defer = true;
    document.body.appendChild(script);
  }, []);

  return (
    <>
      <link type="text/fscss" href="/style.fscss" />
      <div className="boxes">
        <div></div><div></div><div></div>
      </div>
    </>
  );
}

Explore the full power of FSCSS with our comprehensive documentation:

Complete Feature Reference

Detailed explanations of all FSCSS features with practical examples:

  • Variables and style stores
  • Mixins and shared properties
  • Value repetition and extraction
  • Keyframe shorthand
  • Vendor prefixing
Read Documentation

Suggest improvement

We really want your thoughts; your feedback means a lot to us!