Exploring FSCSS Features

FSCSS (Figured Shorthand Cascading Style Sheet)

---

✨ 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. New fscss modular-system available, details: https://github.com/fscss-ttr/fscss-modules

• @event → event-based styling logic

• exec() → debugging and runtime helpers

+ more kindly check htrps://www.npmjs.com/package/fscss and https://fscss.devtem.org/ for latest informations

---

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

---

🔗 Try It

👉 Features
👉 CodePen Demo
👉 GitHub Repo

Thanks for reading 🙏

FSCSS v1.1.22 available