FSCSS @import

How to Use the @import Method in FSCSS for Cleaner Code

The @import method in FSCSS is a game-changer for organizing styles. It lets you split your code into modular files—like colors, buttons, or layouts—and import them where needed. Think of it as a toolbox for your styles. Here's a quick guide to using it effectively.

Tip: Keep variables, mixins, and components in separate files for smoother teamwork and easier maintenance.

---

Step-by-Step Guide

1. Create Small Modules

Break your styles into focused FSCSS files like _variables.fscss or _buttons.fscss. Each file should handle one task.

/* _variables.fscss */
$primary: #4361ee;
$secondary: #7209b7;
$accent: #f72585;

2. Import Them in Your Main File

Use @import(exec(...)) in main.fscss to pull everything together.

/* main.fscss */
@import(exec(_variables.fscss));
@import(exec(_buttons.fscss));

body {
  background: $primary!;
  color: white;
}

3. Link in Your HTML

Connect main.fscss to your HTML so FSCSS can compile it into CSS.

<link type="text/fscss" href="main.fscss">
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" async></script>

---

Why Use @import?

• Modular: Split styles into clean, focused files instead of a giant mess.
• Team-Friendly: Multiple devs can work without conflicts.
• Flexible: Import only what you need, even conditionally for mobile or dark mode.

---

Keep your FSCSS projects organized and scalable with @import. Try it out and streamline your workflow! 🚀

Note: Want to dive deeper? Check out FSCSS docs for more.