Why FSCSS?
FSCSS provides powerful tools to streamline your CSS development process:
Lightning Fast
Write complex CSS with significantly less code using intuitive shorthand syntax.
- 50% less code than traditional CSS
- Faster development cycles
- Simplified maintenance
Reusable Patterns
Create reusable style patterns with variables, mixins, and style stores.
- DRY (Don't Repeat Yourself) principles
- Consistent design system
- Easy global updates
Powerful Features
Advanced capabilities like value repetition, extraction, and automatic prefixing.
- rpt() for repeating values
- copy() for value extraction
- Automatic vendor prefixing
Install FSCSS
Latest Version v1.1.6
Choose your preferred installation method:
View on npmUsage Guide
Learn how to integrate FSCSS into your projects:
Option 1: Using HTML <link> and CDN
Include your FSCSS file and load the compiler via CDN:
<link type="text/fscss" href="style.fscss">
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.js" async></script>
Option 2: Using exec() in JavaScript beta
Import the exec method from FSCSS CDN and initialize it programmatically:
import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js";
async function applyStyle() {
new exec({
type: "URL",
content: "style.fscss"
});
}
applyStyle();
✨ Developer Experience: Callbacks, Error Handling, and Maintainability
- Built-in Callbacks: FSCSS provides onSuccess and onError hooks for better control over style execution results. Use them to log, debug, or respond to runtime style application.
- Error Reporting: Errors are caught and reported through a clean callback interface, making debugging straightforward and user notifications possible.
- Maintainable Structure: The exec() method uses named parameters, improving readability and maintainability—especially useful for scaling or integrating multiple stylesheets.
🧪 Example: Dynamically Load a Remote FSCSS File with Debugging
import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js";
const DEBUG = true;
function applyFSCSS({ type, content }) {
exec({
type,
content,
onSuccess: (styleElement) => {
if (DEBUG) console.log("✅ FSCSS applied:", styleElement);
},
onError: (error) => {
console.error("❌ Failed to apply FSCSS:", error);
alert("⚠️ Could not load styles. Please try again later.");
}
});
}
applyFSCSS({
type: "URL",
content: "styles/style.fscss"
});
Documentation
Explore the full power of FSCSS with our comprehensive documentation:
Complete Feature Reference
Detailed explanations of all FSCSS features with practical examples:
- Variables and style stores
- Mixins and shared properties
- Value repetition and extraction
- Keyframe shorthand
- Vendor prefixing