@import Method RECOMMENDED

The @import method in FSCSS allows you to bring one .fscss file into another. This gives your project a modular structure, where each file focuses on a single task (like variables, mixins, or components).

Think of @import as “connecting puzzle pieces”: you make small, clean pieces of code and then combine them into a full stylesheet. This makes your styles easier to read, maintain, and reuse.

Best Practice: Use @import to organize your styles into logical groups (variables, mixins, buttons, layouts). This way you avoid one giant stylesheet that’s hard to manage.

Step 1 — Create Your Modules

Start by creating small, focused FSCSS files. For example:

_variables.fscss

_variables.fscss 
/* Color Variables */
$primary: #4361ee;
$secondary: #7209b7;
$accent: #f72585;
$dark: #1e293b;
$light: #f8fafc;

/* Spacing Variables */
$spacing-sm: 0.5rem;
$spacing-md: 1rem;
$spacing-lg: 2rem;

_mixins.fscss

_mixins.fscss 
/* Flex Center Mixin */
str(flexCenter, "
  display: flex;
  justify-content: center;
  align-items: center;
")

/* Card Style Mixin */
str(cardStyle, "
  padding: $spacing-md!;
  border-radius: 8px;
  background: $light!;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
")

_buttons.fscss

_buttons.fscss 
/* Base Button */
.button {
  padding: $spacing-sm! $spacing-md!;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Primary Button */
.btn-primary {
  background: $primary!;
  color: white;

  &:hover {
    background: darken($primary!, 10%);
  }
}

Step 2 — Import Modules in Main File

Now, create a main.fscss file where you will gather everything. Use @import(exec(...)) to bring in your module files.

main.fscss 
/* Import Core Modules */
@import(exec(_variables.fscss))
@import(exec(_mixins.fscss))
@import(exec(_buttons.fscss))

/* Custom Styles */
body {
  background: $light!;
  color: $dark!;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.card {
  cardStyle
  margin-bottom: $spacing-md!;

  .card-title {
    font-size: 1.5rem;
    color: $primary!;
    margin-bottom: $spacing-sm!;
  }
}

Step 3 — Link Main File in HTML (testing)

Finally, link main.fscss inside your HTML page. The FSCSS compiler will automatically turn it into valid CSS in the browser. Not recommended in production, (compile it to standard css)

index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FSCSS Modular Example</title>

  <!-- Link your main FSCSS file -->
  <link type="text/fscss" href="main.fscss">

  <!-- Include FSCSS compiler -->
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" defer></script>
</head>
<body>
  <div class="card">
    <h2 class="card-title">Card Title</h2>
    <p>This is a card with imported styles.</p>
    <button class="button btn-primary">Click Me</button>
  </div>
</body>
</html>

Advanced @import Usage

Nested Imports

You can import files inside other files for deep modularity. Example: a components.fscss file that imports buttons, cards, and navigation. 

/* components.fscss */
@import(exec(_buttons.fscss))
@import(exec(_cards.fscss))
@import(exec(_navigation.fscss))

Conditional Imports

Load certain files only when conditions match — like small screens or dark mode. 

/* Load extra styles for mobile */
@media (max-width: 768px) {
  @import(exec(mobile.fscss))
}

/* Load dark theme automatically */
@media (prefers-color-scheme: dark) {
  @import(exec(dark-theme.fscss))
}

Dynamic Imports

Combine @import with events to load initial builds or apply external themes dynamically. 

/* style.fscss */
@import(exec(_init themes))

div.star {
   background: @event.theme(forest);
   $box-size: 200px;
   %2(width, height[: $box-size!;])
   tr Shape: @event.shape(star);
}
Warning: Avoid circular imports (when file A imports file B, and file B imports file A). This can cause infinite loops and break your build.

Benefits of Using @import

Organized

  • Split styles into logical files
  • Reduce clutter in your main stylesheet
  • Find and update code faster

Flexible

  • Load only what you need
  • Use conditional imports for themes and devices
  • Reuse modules across projects

Team Friendly

  • Multiple devs can work at once
  • Clear separation of concerns
  • Consistency across the project
Performance Note: In development, multiple files are fine. For production, consider bundling them into one file to reduce HTTP requests.