FSCSS Documentation

A comprehensive guide to the Figured Shorthand CSS preprocessor

What is FSCSS?

FSCSS (Figured Shorthand CSS) is a lightweight, powerful 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, mixins, and functions

Powerful Features

Advanced capabilities like conditional logic and loops

Installation

NPM Installation

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

bash

npm install fscss@1.1.11

For global CLI usage:

bash

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

CDN Usage

For quick integration in HTML files (runtime mode):

HTML

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

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;
  
  &:hover {
    background:linear-gradient(to left, black, $primary-color);
    transform: translateY(-2px);
  }
}

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;
}

.btn:hover {
  background: linear-gradient(to left, back, #2563eb);
  transform: translateY(-2px);
}

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;
}

Ready to try FSCSS?

Start simplifying your CSS workflow today with our powerful preprocessor.

Install via NPM View Examples