Exploring FSCSS Features

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

🔗 Try It

👉 Features
👉 CodePen Demo
👉 GitHub Repo

💬 Feedback

This is still experimental — I’d love to hear your thoughts:

• Does FSCSS make sense, or is it harder to read?

• Which of the features above feels most useful to you?

Would you try this for prototyping or animation-heavy projects?

Thanks for reading 🙏