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

Copy Function (copy())

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(-14, my-darkblue)";
          border: 2px solid $my-darkblue!;
         } 

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

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

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.