@import Method RECOMMENDED

Import FSCSS files within other FSCSS files to create a modular architecture for your stylesheets.

Best Practice: Use @import to organize your styles into logical components (variables, mixins, components) for better maintainability.
1

Create Your FSCSS Modules

Organize your styles into separate files for better structure.

_variables.fscss

/* Color Variables */
$primary: #4361ee;
$secondary: #3a0ca3;
$accent: #f72585;
$light: #f8f9fa;
$dark: #1e293b;

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

_mixins.fscss

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

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

_buttons.fscss

/* Base Button Style */
.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%);
  }
}
2

Import Modules in Main File

Use the @import(exec(...)) syntax to include your modules.

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

/* Your 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!;
  }
}

/* Additional custom styles... */
3

Link Main File in HTML

Include your main FSCSS file in your HTML as you normally would.

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" async></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 Features

Nested Imports

Import files within imported files for deep modularity.

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

Conditional Imports

Use media queries with imports for responsive loading.

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

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

Dynamic Imports

Combine with JavaScript for advanced loading scenarios.

/* main.fscss */
@import(exec(core-styles.fscss))

/* Load theme based on user preference */
if (userPrefersDark) {
  @import(exec(dark-theme.fscss))
} else {
  @import(exec(light-theme.fscss))
}
Important: Avoid circular dependencies where file A imports file B, which imports file A.

Benefits of @import Method

Modular Architecture

  • Split styles into logical components
  • Reuse code across projects
  • Easier to maintain and update

Performance

  • Load only what you need
  • Conditional loading based on context
  • Reduces duplicate code

Team Collaboration

  • Multiple developers can work simultaneously
  • Clear separation of concerns
  • Easier to understand code structure
Performance Note: While @import provides excellent organization, be mindful that each imported file requires an additional HTTP request. For production, consider combining files during your build process.