Episode 1 — Fundamentals / 1.7 — Working With SASS

1.7.d — Partials & Imports

In one sentence: SASS partials (_filename.scss) split your styles into small, focused files, and the modern @use / @forward module system wires them together with namespacing — replacing the deprecated @import.

Navigation: ← 1.7.c — Variables & Nesting · 1.7.e — Mixins →

1. What are partials?

A partial is an SCSS file whose name starts with an underscore: _variables.scss, _buttons.scss. The underscore tells the compiler: "do not compile this file into its own CSS — it will be pulled in by another file."

src/scss/
  _variables.scss     ← partial (not compiled alone)
  _buttons.scss       ← partial
  main.scss           ← entry point (compiled → main.css)

Only main.scss produces output. Partials exist purely to organize your code.

2. `@use` — the modern import

// main.scss
@use 'abstracts/variables';
@use 'components/buttons';

How `@use` works

Loads the file once (no duplicate output even if used in multiple files).
Creates a namespace — members are accessed as variables.$primary, not just $primary.
The namespace defaults to the file name (without _ and .scss).

// _variables.scss
$primary: #3b82f6;
$radius:  0.5rem;

// _buttons.scss
@use '../abstracts/variables';

.btn {
  background: variables.$primary;
  border-radius: variables.$radius;
}

Custom namespaces

@use 'abstracts/variables' as vars;

.btn {
  background: vars.$primary;
}

No namespace (`*`)

@use 'abstracts/variables' as *;

.btn {
  background: $primary;   // direct access — use sparingly
}

3. `@forward` — re-exporting

@forward makes members of one file available to files that @use the forwarding file. Think of it as creating a public API for a folder.

// abstracts/_index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// components/_buttons.scss
@use '../abstracts';       // loads _index.scss → gets variables + mixins + functions

.btn {
  background: abstracts.$primary;
  @include abstracts.flex-center;
}

This keeps import paths clean — one @use instead of three.

4. `@import` — deprecated (but still seen)

@import 'variables';       // OLD — deprecated since Dart Sass 1.23

Problem with `@import`	How `@use` fixes it
Every `@import` dumps everything into global scope	`@use` creates namespaces — no name collisions
Same file imported twice → duplicate CSS output	`@use` loads each file once
No control over which members are public	`@forward` controls what gets exported
Order-dependent — variables must load before use	`@use` explicitly declares dependencies

Rule: Use @use and @forward in all new code. You will encounter @import in legacy projects and older tutorials — know what it does, but do not adopt it.

5. The 7-1 pattern

The 7-1 architecture splits styles into seven folders and one entry file:

scss/
├── abstracts/     ← $variables, @mixin, @function (no CSS output)
├── base/          ← resets, typography, global HTML element styles
├── components/    ← buttons, cards, modals, dropdowns
├── layout/        ← header, footer, sidebar, grid system
├── pages/         ← page-specific overrides (home, login, dashboard)
├── themes/        ← dark mode, seasonal themes (optional)
├── vendors/       ← third-party CSS overrides (normalize, libraries)
└── main.scss      ← the single entry file that @use's everything

`main.scss` example

// Abstracts (no output — just tools)
@use 'abstracts';

// Base styles
@use 'base/reset';
@use 'base/typography';

// Layout
@use 'layout/header';
@use 'layout/grid';

// Components
@use 'components/buttons';
@use 'components/cards';

// Pages
@use 'pages/home';

When to simplify

Small projects do not need all seven folders. Start with three:

scss/
├── abstracts/     ← variables + mixins
├── components/    ← everything else
└── main.scss

Add folders as the project grows — do not over-engineer day one.

6. Index files

Each folder can have an _index.scss that @forwards all files in that folder:

// components/_index.scss
@forward 'buttons';
@forward 'cards';
@forward 'modals';

Then in main.scss:

@use 'components';    // loads _index.scss automatically

7. Controlling visibility with `@forward`

// Only expose specific members
@forward 'variables' show $primary, $secondary;

// Hide internal-only members
@forward 'mixins' hide _internal-helper;

This gives library authors fine-grained control over their public API.

8. Key takeaways

Partials (_file.scss) are never compiled alone — they are pulled in by entry files.
@use loads a file once, creates a namespace, and explicitly declares dependencies.
@forward re-exports members so folders can have a clean public API via _index.scss.
@import is deprecated — it pollutes global scope and can cause duplicate output.
The 7-1 pattern (abstracts, base, components, layout, pages, themes, vendors + main) scales from small to large projects.
Start simple — add folders as complexity demands, not before.

Explain-It Challenge

Explain without notes:

Why does @use require namespacing (variables.$primary) — what problem does this solve compared to @import?
What role does @forward play in the _index.scss file of a folder?
Describe the 7-1 pattern and when you might simplify it.

Navigation: ← 1.7.c — Variables & Nesting · 1.7.e — Mixins →

1.7.d — Partials & Imports

1. What are partials?

2. @use — the modern import

How @use works