Exploring FSCSS Features

#webdev #devops #fscss #frontend

I’ve been working on FSCSS (Figured Shorthand CSS) — an experimental FSCSS preprocessor.
FSCSS tries to reduce boilerplate with compact syntax and helper functions.

I already introduced FSCSS before, but this time I wanted to share a clear list of some core features.

✨ Core Features

Variables ($var, str()) → reusable values
Style Replacement (%n()) → shorthand for repeated properties
Repeat Function (rpt()) → quick repetition
Copy Function (copy()) → copy part of a value
String Extractor (@ext()) → extract substrings
Drops / Shared Properties → reuse style groups
Attribute Selectors → extended selector logic
Keyframes ($(@keyframes …)) → shorthand animation blocks
Vendor Prefixing (-*) → automatic prefixes
Function-based (@fun) → reusable function-like blocks
Array Methods (@arr) → define and loop arrays
🎲 Random Function (@random()) → runtime randomness
➕ Number Calculation (num()) → math in styles
🔗 Import (@import) → include external FSCSS files
@event → event-based styling logic
exec() → debugging and runtime helpers

⚡ Example

/* CSS */
.box, .card {
  animation: trans 3s ease-in infinite;
} 

@keyframes trans {
  from {
    width: 0;
    height: 0;
    background: red;
  } 
  to {
    width: 200px;
    height: 200px;
    background: blue;
  } 
}

/* FSCSS */
$(@keyframes trans, .box .card &[3s ease-in infinite]) {
  from {
    %2(width, height [: 0;]) 
    background: red;
  } 
  to {
    %2(width, height [: 200px;])
    background: blue;
  }
}