FSCSS Documentation

Why Use FSCSS?

FSCSS streamlines your CSS workflow with features designed to reduce repetition, improve readability, and enhance maintainability of your stylesheets.

Variables

FSCSS variables provide a powerful way to store and reuse values throughout your stylesheets. Define once, use everywhere.

Basic Usage

// Define color variables
$primary: #3b82f6;
$secondary: #8b5cf6;
$text: #1e293b;

// Use variables
.button {
  background: $primary!;
  color: white;
  border: 2px solid $secondary!;
}

.heading {
  color: $text!;
  font-size: 2rem;
}

:root {
  --primary: #3b82f6;
  --secondary: #8b5cf6;
  --text: #1e293b;
}

.button {
  background: var(--primary);
  color: white;
  border: 2px solid var(--secondary);
}

.heading {
  color: var(--text);
  font-size: 2rem;
}

Style Replacement (str(), re(), store())

Store reusable style patterns and inject them wherever needed. Perfect for maintaining consistent styles across components.

Practical Example

// Store a card style pattern
str(cardStyle, "
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  background: white;
  transition: transform 0.3s ease;
")

// Store a hover effect
str(cardHover, "
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
")

// Apply stored styles
.product-card {
  cardStyle
  max-width: 300px;
  
  &:hover {
    cardHover
  }
}

.user-profile {
  cardStyle
  background: #f0f9ff;
}

Repeat Function (rpt())

Generate repeated patterns, content, or values with the rpt() function. Ideal for visual indicators, loading states, and generated content.

Use Cases

.loading::after {
  content: "rpt(5, '• ')";
}

.rating-4::before {
  content: "rpt(4, '★')";
  color: gold;
}

// Create a decorative separator
.separator::after {
  content: "rpt(10, '— ')";
  display: block;
  text-align: center;
  color: #94a3b8;
  margin: 1rem 0;
}

// Generate background pattern
.grid-bg {
  background-image: 
    linear-gradient(90deg, 
      rgba(0,0,0,0.1) 1px, 
      transparent 1px),
    linear-gradient(180deg, 
      rgba(0,0,0,0.1) 1px, 
      transparent 1px);
  background-size: 
    rpt(8, '20px ') 100%, 
    100% rpt(8, '20px ');
}

Extract and reuse parts of values with the copy() function. Perfect for working with design tokens and value lists.

Practical Example

body{
  /* primary-color = #4ff */
  background:#4ff000 copy(4, primary-color);
  color: $primary-color!;
}
          /* use it in any sheets */
          a{
            color: $primary-color!;
          }
span:before{
          /* copy 'midnightblue' and store it as 'my-darkblue' */
          content: "blue or midnightblue copy(-13, my-darkblue)";
          border: 2px solid $my-darkblue!;
         } 

@ext() – Value & String Extractor

The @ext() method in FSCSS (Figured Shorthand CSS) is a **value and string slicing utility**. It extracts a substring from a given property string or value using index-based parameters, stores it as a named variable, and allows it to be reused across your styles.

🔧 Syntax

@ext(startIndex, length: variableName)

- startIndex: The position to start extraction. Use negative values to count from the end.
- length: How many characters to extract.
- variableName: The alias name to store the result.

📦 Example

body {
  property: "the red color @ext(4,3: myRed)";
  color: @ext.myRed;
}

h1 {
  content: "Welcome to FSCSS @ext(-5,5: brand)";
  font-family: @ext.brand;
}

mx() / mxs() Mixins

Use mx() and mxs() to quickly apply multiple properties with the same value. mxs uses a shared value string, while mx requires appending colons manually.

Use Cases

.card {
  mxs(width, height, max-height, max-width, min-width, min-height, '200px')
}

.box {
  mx(width, height, max-height, max-width, min-width, min-height, ': 200px;')
}

.card {
  mxs(width, height, max-height, max-width, min-width, min-height, ' 200px')
}
.box {
  mx(width, height, max-height, max-width, min-width, min-height, ': 200px;')
}

.card {
  width: 200px;
  height: 200px;
  max-height: 200px;
  max-width: 200px;
  min-width: 200px;
  min-height: 200px;
}
.box {
  width: 200px;
  height: 200px;
  max-height: 200px;
  max-width: 200px;
  min-width: 200px;
  min-height: 200px;
}

Attribute Selector Shortcut

Shorthand for attribute selectors. Converts $(type: submit) into [type='submit'].

Use Cases

$(type:submit) {
  background: green;
  color: white;
}

$(type:submit){
  background: green;
  color: white;
}

[type='submit'] {
  background: green;
  color: white;
}

Keyframes Compact

Write animations compactly using $(@keyframes name, selectors, &[<timing>]). FSCSS will expand this into both animation rules and the actual keyframe block.

Use Cases

$(@keyframes slideIn, .box, .card, &[3s linear infinite]) {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

$(@keyframes slideIn, .box, .card, &[3s linear infinite]) {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.box, .card {
  animation: slideIn 3s linear infinite;
}
@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

Fast Application of Animation to Multiple Selectors
This "fscss" snippet demonstrates a concise way to define and apply a CSS animation to multiple HTML elements (div, h1, h2, p) simultaneously. It encapsulates the @keyframes definition and its application within a single, streamlined block. The output automatically generates the @keyframes rule with an animation name derived from the first selector (in this case, div), and then applies this animation to all specified elements with the designated duration and timing function.

$(@keyframes div, h1, h2, p &[5s ease-in]){
          0%{ color: #001133;} 
          50%{ color: #001044;} 
          100%{ color: #000122;}
          }

div, h1, h2, p {animation:div 5s ease-in;}@keyframes div{
0%{ color: #001133;}
50%{ color: #001044;}
100%{ color: #000122;}
}

Vendor Prefixing (-*-)

Use the -*- prefix to automatically apply vendor-specific properties across -webkit, -moz, -ms, and -o.

Use Cases

.box {
  -*-transform: rotate(45deg);
}

.box {
  -*-transform: rotate(45deg);
}

.box {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

Function based (@fun)

This guide demonstrates how to use @fun blocks in FSCSS to modularize and reuse style values in your stylesheets. It introduces a cleaner, more maintainable approach to logic-based grouping and referencing in design.

@fun(e){
  a: 100px;
  b: 200px;
  c: 300px;
}

@fun(col){
  1: #550066;
  2: #005523;
}

@fun(pr){
  border: 2px groove red;
  border-radius: 40px 60px 0 6px;
}

body {
  background: @fun.col.1.value;
}

div {
  background: linear-gradient(@fun.col.1.value, @fun.col.2.value);
  @fun.pr;
  outline: @fun.pr.border.value;
  %2(width, height[:@fun.e.a.value;]);
}

Array @arr() Method Syntax

The @arr() directive is a powerful array-based syntax for reusable value lists such as delays, colors, or dimensions. It's ideal for staggered animations, theming, and scalable utilities.

@arr(name[ item1, item2, item3, ... ])

@arr name[ item1, item2, item3, ... ]

@arr(e[0.1, 2.5, 7]);
@arr(col[red, blue, green]);

section {
  background: @arr.col[2];
}

section :nth-child(@arr.e[]) {
  animation: spin 3s linear infinite;
  animation-delay: @arr.e[]s;
  rotate: 0;
  background: @arr.col[3];
}

@keyframes spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

section :nth-child(@arr.e[]) {
  animation-delay: @arr.e[]s;
}

section :nth-child(1) { animation-delay: 0.1s; }
section :nth-child(2) { animation-delay: 2.5s; }
section :nth-child(3) { animation-delay: 7s; }

section {
  background: blue;
}

section :nth-child(1) {
  animation: spin 3s linear infinite;
  animation-delay: 0.1s;
  rotate: 0;
  background: green;
}

section :nth-child(2) {
  animation: spin 3s linear infinite;
  animation-delay: 2.5s;
  rotate: 0;
  background: green;
}

section :nth-child(3) {
  animation: spin 3s linear infinite;
  animation-delay: 7s;
  rotate: 0;
  background: green;
}

🎲 FSCSS @random() Method

The @random() method lets you apply randomized values to CSS properties, enabling dynamic, ever-changing styles without JavaScript. When used with @arr(), it becomes a powerful tool for clean and reusable random styling.

@random([value1, value2, value3, ...])

@arr(e[ @random([lightgreen, yellow, white, skyblue]), 
        #@random([500,009,550]) ]);

.btn {
  padding: 10px 20px;
  margin: 10px;
  background: @arr.e[2];
  color: @arr.e[1];
  border: 2px groove @arr.e[1];
  transform: translate(@random([10,30,60])px);
  rotate: @random([0,90,150])deg;
}

Understanding more about the copy() Function

The copy() function in FSCSS is a powerful tool for extracting and reusing parts of string values—very useful for design tokens or list manipulation.

How copy(length, variable) Works

• length: Determines how many characters to extract.
• Positive number: Extracts from the start.
• Negative number: Extracts from the end.
• Length exceeding string: Returns entire string.
• variable: Name of the FSCSS variable to store the extracted result.

Practical Example

body {
  /* primary-color = #4ff */
  background: #4ff000 copy(4, primary-color);
  color: $primary-color!;
}a { color: $primary-color!; }

span:before { /* copy 'midnightblue' and store it as 'my-darkblue' */ content: "blue or midnightblue copy(-14, my-darkblue)"; border: 2px solid $my-darkblue!; }

Section 1: Extracting from Background Property

• background: #4ff000 copy(4, primary-color);
• Extracts first 4 characters of #4ff000 → #4ff
• Stores value in $primary-color
• color: $primary-color!;
• Applies extracted value as the text color

Section 2: Reusing the Variable

The variable $primary-color is reused in other selectors, promoting consistency:

a {
  color: $primary-color!;
}

Section 3: Extracting with a Negative Length

• content: "blue or midnightblue copy(-13, my-darkblue)";
• Attempts to extract last 13 characters of "blue or midnightblue"
• Likely result: " midnightblue", but the intention was probably "midnightblue"
• border: 2px solid $my-darkblue!;
• Uses the extracted value for border styling

Summary and Key Takeaways

• Extraction: copy() lets you grab a part of a string by position.
• Positive/Negative: Choose from beginning or end of string.
• Reusable: Stores results in variables for DRY code.
• Design Tokens: Great for dynamic styling logic.
• String Manipulation: Can be used on any string-based CSS value.
• Be Precise: Miscounts in length may lead to unexpected results.

@num() – Number Calculations

The @num() method in FSCSS allows inline numeric calculations directly in your stylesheets. You can use it to perform arithmetic operations like num(40 * 2) → 80, and append units like num(4 * 6)px → 24px.

🛠️ Use Cases

selector {
  max-height: num(40 * 4); /* = 160 */
}

textarea {
  max-height: num(@random([40, 10, 5, 0]) + 50);
}

See the @random method →

Detailed Exploration of FSCSS Style Sheet

FSCSS, an acronym for Figured Shorthand Cascading Style Sheet, emerges as a promising methodology within the realm of web development, specifically aimed at enhancing the efficiency and readability of CSS (Cascading Style Sheets).

Definition and Purpose

FSCSS is defined as a styling approach designed to simplify CSS by introducing shorthand notations. The primary objective is to reduce repetitive code, thereby making styles more concise and easier to maintain.

This methodology rethinks traditional CSS writing, focusing on efficiency without compromising functionality. For instance, it aims to address the common challenge of bloated CSS files, which can hinder performance and readability, especially in large-scale projects.

The evidence leans toward FSCSS being particularly beneficial for developers seeking clean and maintainable CSS structures. This is supported by its emphasis on reducing redundancy, a common pain point in web development where stylesheets can become unwieldy over time.

Key Features and Functionality

• Shorthand Methods: One notable technique is the use of notations like %2, which allows multiple CSS properties to share the same value. This reduces the need for repetitive declarations, such as setting margin and padding with a single shorthand, thereby streamlining the codebase.
• Rapid Tag Formatting (rtF): This feature enables developers to style multiple elements quickly, which is particularly useful in projects with numerous similar components, such as lists or grids. It facilitates a more modular approach to styling, aligning with modern web development practices.
• Animation Efficiency: FSCSS provides a compact way to define animations, potentially reducing the verbosity associated with CSS animations. For example, it might allow for shorter syntax in defining keyframes, making animation code more manageable.
• Script Integration: The methodology works with FSCSS-specific scripts, suggesting a potential integration with JavaScript or other tools to further streamline styling processes. This could involve automated generation of styles or enhanced compatibility with build tools.

These features collectively aim to address the evolving needs of web developers, especially in contexts where performance and maintainability are critical, such as responsive web design and large-scale applications.

Use Cases and Adoption

Given its focus on efficiency, FSCSS appears particularly suited for projects requiring clean and maintainable CSS structures. This includes:

• Enterprise-level websites, where consistent styling across numerous pages is essential
• Startup projects aiming to scale rapidly without technical debt
• Developers working under tight deadlines, as it promises to reduce development time

Introducing FSCSS: Figured Shorthand Cascading Style Sheet

We hope you have an excellent experience exploring its features and capabilities.

The FSCSS journey began in 2022, conceived by David Hux as a robust testing framework. Early development by Figsh focused on core concepts like %2 to %6, %i, and basic variable handling using $....

Building on this foundation, FSCSS quickly evolved. As outlined in the official documentation, the framework now includes:

• Shorthand methods %1() to %6()
• Powerful merging tools like mx() and mxs()
• String manipulation with str() and re()
• Reusable value extraction with copy()
• Advanced variable handling like $...:... and $...!
• Support for @keyframes and advanced selector patterns with $(... :...)

2023 marked a significant milestone with the addition of the copy() function and the framework’s first public release for testing.

Enhancements continued into 2024, with new functions and improved preprocessor memory, culminating in 2025 with the official npm package release of fscss.

This latest release includes:

• An advanced replace function for complete string matching
• Expanded %n() method supporting infinite counting
• Developer-friendly console logs and debugging tools
• Direct execution via the FSCSS browser extension

FSCSS is officially published under the Figsh organization as the fscss package on npm. Led by David Hux and managed through the fscss-ttr initiative, FSCSS aims to enhance learning and collaboration across developer communities.

You can find tutorials and community support on platforms like:

• dev.to
• CodePen
• X (formerly Twitter)
• Facebook
• YouTube
• Stack Overflow
• Quora
• GitHub
• and more.

FSCSS File Structure Overview

• /exec.min.js (from jsDelivr)

  This is likely a minified version of an executable JavaScript file. “Minified” means all unnecessary characters (like spaces and comments) have been removed to make the file smaller and faster to load. It's delivered via jsDelivr, a popular Content Delivery Network (CDN) used for efficient global delivery.

• /exec.js (original)

  This is the original, un-minified version of the executable JavaScript file. Developers use this version for easier reading and debugging. The minified version (exec.min.js) is typically generated from this for deployment.

• /index.js (npm default)

  This is the standard main entry point for JavaScript projects using npm (Node Package Manager). When a project is run or imported as a package, index.js is typically the first file executed.

• /xfscss.min.js (for importation)

  A minified JavaScript file designed to handle FSCSS functions, such as dynamic CSS processing and styling within JavaScript environments. This file is optimized for production use and integration via script imports.

• /e/ (available in version 1.1.6+)

  This directory/module contains utilities related to error handling and logging. Introduced in version 1.1.6, it provides developer-friendly tools for debugging and diagnostics, making it easier to identify and fix issues during development.