Importing Files

Importing Files

Large projects shouldn't live in one massive CSS file. SASS lets you split styles into multiple files and combine them with imports. This keeps your code organised and maintainable.

Partials

A partial is a SASS file prefixed with an underscore _. It won't compile to its own CSS file — it's meant to be imported.

scss/
├── _variables.scss      ← Partial (starts with _)
├── _mixins.scss         ← Partial
├── _base.scss           ← Partial
├── _header.scss         ← Partial
├── _footer.scss         ← Partial
├── _components.scss     ← Partial
└── style.scss           ← Main file (compiles to CSS)

The @import Rule (Legacy)

// style.scss — the main entry point
@import 'variables';    // Imports _variables.scss
@import 'mixins';       // Imports _mixins.scss
@import 'base';         // Imports _base.scss
@import 'header';       // Imports _header.scss
@import 'footer';       // Imports _footer.scss
@import 'components';   // Imports _components.scss

// Note: you omit the _ and .scss extension

The @use Rule (Modern — Recommended)

// style.scss
@use 'variables' as v;
@use 'mixins' as m;

.card {
    color: v.$color-primary;       // Access variable with namespace
    @include m.flex-center;         // Access mixin with namespace
}

// Or use * to load without namespace:
@use 'variables' as *;
.card {
    color: $color-primary;         // Direct access
}

@use vs @import

Feature	@import (legacy)	@use (modern)
Global scope	Everything is global	Namespaced by default
Multiple loads	Loads file every time	Loads file once only
Naming conflicts	Possible	Prevented by namespaces
Status	Being phased out	Recommended going forward

The @forward Rule

Use @forward to re-export partials from an index file:

// scss/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'base';

// style.scss — import everything at once
@use 'scss' as *;
// This loads _index.scss from the scss/ folder

Recommended File Structure (7-1 Pattern)

scss/
├── abstracts/
│   ├── _variables.scss     ← Colours, fonts, sizes
│   └── _mixins.scss        ← Reusable mixins
├── base/
│   ├── _reset.scss         ← CSS reset / normalize
│   ├── _typography.scss    ← Headings, body text
│   └── _base.scss          ← Global base styles
├── components/
│   ├── _buttons.scss       ← Button styles
│   ├── _cards.scss         ← Card styles
│   ├── _forms.scss         ← Form styles
│   └── _navbar.scss        ← Navigation styles
├── layout/
│   ├── _header.scss        ← Header layout
│   ├── _footer.scss        ← Footer layout
│   ├── _sidebar.scss       ← Sidebar layout
│   └── _grid.scss          ← Grid system
├── pages/
│   ├── _home.scss          ← Home page specific
│   └── _about.scss         ← About page specific
└── style.scss              ← Main entry point

Main Entry Point

// style.scss
// Abstracts
@import 'abstracts/variables';
@import 'abstracts/mixins';

// Base
@import 'base/reset';
@import 'base/typography';
@import 'base/base';

// Layout
@import 'layout/header';
@import 'layout/footer';
@import 'layout/grid';

// Components
@import 'components/buttons';
@import 'components/cards';
@import 'components/forms';
@import 'components/navbar';

// Pages
@import 'pages/home';
@import 'pages/about';

Order matters: variables and mixins first, then base, then layout, then components, then page-specific overrides.

Key Takeaways

• Partials start with _ — they won't compile to separate CSS files
• @import combines partials into one stylesheet (legacy but common)
• @use is the modern replacement — namespaced and loaded once
• @forward re-exports partials from index files
• Organise styles by concern: variables → base → layout → components → pages
• Only the main entry file (style.scss) compiles to CSS