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 v1.1.6

Choose your preferred installation method:

Install via NPM

For Node.js projects and build pipelines

bash
npm install fscss@1.1.6

CDN Link

For quick integration in HTML files

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

Usage Guide

Learn how to integrate FSCSS into your projects:

Option 1: Using HTML <link> and CDN

Include your FSCSS file and load the compiler via CDN:

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

Option 2: Using exec() in JavaScript beta

Import the exec method from FSCSS CDN and initialize it programmatically:

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

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

applyStyle();


✨ Developer Experience: Callbacks, Error Handling, and Maintainability

🧪 Example: Dynamically Load a Remote FSCSS File with Debugging

JavaScript

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

  const DEBUG = true;

  function applyFSCSS({ type, content }) {
    exec({
      type,
      content,
      onSuccess: (styleElement) => {
        if (DEBUG) console.log("✅ FSCSS applied:", styleElement);
      },
      onError: (error) => {
        console.error("❌ Failed to apply FSCSS:", error);
        alert("⚠️ Could not load styles. Please try again later.");
      }
    });
  }

  applyFSCSS({
    type: "URL",
    content: "styles/style.fscss"
  });
Try It Live on the FSCSS Compiler

Documentation

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