Introduction to FSCSS @import

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.

Modular Architecture

Split styles into logical, focused files

Reusability

Use modules across multiple projects

Team Collaboration

Multiple developers can work simultaneously

Performance

Load only what you need for each page

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

Organize Code into Focused Files

@import

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

  • _variables.fscss → all colors, spacing, and sizes
  • _mixins.fscss → reusable functions like flex-center
  • _buttons.fscss → consistent button styles

_variables.fscss

_variables.fscss 
/* Color Variables */
$primary: #3b82f6;
$secondary: #7c3aed;
$accent: #06b6d4;
$dark: #0f172a;
$light: #f8fafc;

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

/* Typography */
$font-main: 'Inter', sans-serif;
$font-heading: 'Inter', sans-serif;

_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);
")

/* Responsive Breakpoint Mixin */
str(respond-to, "
  @media (min-width: $breakpoint!) {
    @content;
  }
")

_buttons.fscss

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

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

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

/* Secondary Button */
.btn-secondary {
  background: $secondary!;
  color: white;

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

Project Structure

styles/
_variables.fscss
_mixins.fscss
_buttons.fscss
main.fscss

Step 2 — Import Modules in Main File

Combine Modules with @import

@import(exec(...))

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: $font-main!;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-md!;
}

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

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

.centered {
  flexCenter
  height: 100vh;
}
Card Title

This is a card with imported styles.

Step 3 — Link Main File in HTML

Connect FSCSS to Your HTML

HTML Integration

Finally, link main.fscss inside your HTML page. The FSCSS compiler will automatically turn it into valid CSS in the browser.

Note: This approach is great for development and testing. For production, consider compiling FSCSS to standard CSS for better performance.
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.11/exec.min.js" defer></script>
</head>
<body>
  <div class="container">
    <div class="card">
      <h2 class="card-title">Card Title</h2>
      <p>This is a card with imported styles.</p>
      <button class="button btn-primary">Primary Button</button>
      <button class="button btn-secondary">Secondary Button</button>
    </div>
  </div>
</body>
</html>

Advanced @import Usage

Powerful Import Patterns

Advanced Features

Explore advanced patterns for organizing and importing your FSCSS modules.

Nested Imports

You can import files inside other files for deep modularity.

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

Conditional Imports

Load certain files only when conditions match.

/* 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 for dynamic loading.

/* 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

Why Modular Architecture Matters

Using @import provides significant advantages for both development and maintenance.

Organized Code

Split styles into logical files, reduce clutter, and find code faster

Flexible Architecture

Load only what you need, use conditional imports, and reuse modules

Team Friendly

Multiple developers can work simultaneously with clear separation

Scalable

Easily add new features without breaking existing code

Performance Note: In development, multiple files are fine. For production, consider bundling them into one file to reduce HTTP requests.