FSCSS ⇄ CSS Compiler

FSCSS Input
Ready
CSS Output
Waiting
CSS processed successfully! No errors detected. Your FSCSS is valid and ready to use.

FSCSS Features

Core Syntax

  • Variables: Define and reuse values with $name: value;
  • Nesting: Cleaner, hierarchical CSS structure
  • Mixins: Reuse style logic with mx() and mxs()
  • Value Extraction: Shorten repetitive values with copy()

Advanced Functions

  • copy(n, var): Extract & assign parts of values
  • rpt(n, value): Repeat values for content generation
  • re()/str(): Replace shorthand patterns
  • %1–%6: Index-based styling shortcuts

Special Syntax

  • $var!: Access reusable values
  • $(@keyframes): Animation shorthand
  • -*-: Auto-vendor prefixing
  • $(attr:value): Attribute selector shorthand

FSCSS Example

/* Define variables */
$primary: #4361ee;
$secondary: #3f37c9;

nav {
  ul {
    list-style: none;
    li {
      a {
        color: $primary!;
        &:hover {
          color: $secondary!;
        }
      }
    }
  }
}

.container {
  mxs(width, height, max-width, min-width, "200px")
}