Chepter 6: Sass @import
Sass @import and Partials in detail, like we’re refactoring an old project together right now.
This topic is super important because the rules changed dramatically in recent years, and in February 2026 we’re in a transition phase. I’ll explain both the old world (@import) and the new recommended world (@use + partials), why the change happened, and how to actually organize your files today.
1. What Are Partials in Sass? (This part never changed)
Partials are Sass files that are not meant to be compiled into CSS by themselves. They contain variables, mixins, functions, base styles, etc., that other files will load.
Convention (still 100% used in 2026):
-
File name starts with underscore _ Example: _variables.scss, _mixins.scss, _reset.scss, _buttons.scss
-
When you load them, you can omit the underscore and .scss extension:
Old way: @import ‘variables’; New way: @use ‘variables’;
Why the _? Sass tools (VS Code Live Sass Compiler, webpack, Vite, Parcel, etc.) see the _ and skip compiling that file to CSS. No _variables.css junk file gets created.
2. The Old Way: @import (Still Works, But Deprecated)
How it worked (and still technically works in Dart Sass until ~2028+):
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// style.scss (main file) @import 'reset'; @import 'variables'; @import 'mixins'; @import 'buttons'; @import 'cards'; body { @include reset-body(); background: $bg-color; } |
What @import did:
- Copies everything from the imported file into this one (variables, mixins, CSS rules)
- Puts them in the global namespace — everything is shared and can clash
- Loads the file every time it’s referenced (but Sass dedupes CSS output)
- Can be nested inside rules (e.g. inside media queries — rare but possible)
- Very simple syntax
Big problems that accumulated over years:
- Naming collisions (two partials define $spacing → chaos)
- Hard to know where a variable/mixin came from
- Circular imports easy to create accidentally
- Global pollution → debugging nightmare in big teams/projects
- No real modularity / encapsulation
Because of these, Sass team deprecated @import:
- Official deprecation started in Dart Sass 1.80.0 (October 2024)
- Warnings appear in console now
- Will be completely removed in Dart Sass 3.0.0 (planned no sooner than ~late 2026 / 2027, at least 2 years after deprecation)
So in 2026: You still see @import in old projects, Bootstrap 5, many tutorials… but new code should avoid it.
3. The Modern Way: @use + Partials (Recommended in 2026)
@use is the new module system (introduced 2019, mature by 2026).
Key differences from @import:
- Loads file as a module
- Variables, functions, mixins are scoped to the file that uses them (no global pollution by default)
- You must access them with namespace (or use as * to dump into local scope)
- CSS rules are included only once (even if used multiple times)
- @usemust be at top level (cannot nest inside selectors/media queries)
- Encourages clean, predictable code
Basic example – folder structure (modern 2026 best practice)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
src/ scss/ _variables.scss _mixins.scss _reset.scss _buttons.scss main.scss ← entry point, gets compiled to main.css |
_variables.scss (partial)
|
0 1 2 3 4 5 6 7 8 |
$primary: #6c5ce7; $spacing-unit: 1.6rem; $font-base: 'Inter', system-ui, sans-serif; |
_mixins.scss
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@mixin flex-center { display: flex; justify-content: center; align-items: center; } @mixin button-base { padding: $spacing-unit * 0.75 $spacing-unit * 1.5; border-radius: 8px; cursor: pointer; } |
main.scss (entry point – this gets compiled)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
@use 'reset'; // loads CSS from _reset @use 'variables' as v; // namespace 'v' @use 'mixins' as m; // namespace 'm' @use 'buttons' as b; // Now use with namespace body { @include reset.body(); // if reset has @mixin body {…} font-family: v.$font-base; margin: 0; } .hero { @include m.flex-center; min-height: 80vh; background: linear-gradient(135deg, v.$primary, darken(v.$primary, 20%)); .btn { @include b.button-base; @include m.button-base; // can combine mixins background: v.$primary; color: white; &:hover { background: darken(v.$primary, 12%); } } } |
Alternative – if you hate typing namespace every time:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
@use 'variables' as *; // * = "dump everything into my scope" @use 'mixins' as *; body { font-family: $font-base; // no prefix needed } |
Caution: as * is convenient but reduces traceability — use sparingly (good for base variables/mixins, avoid in large teams).
4. @forward – The Missing Piece for Barrel/Index Files
You often want an index file to collect many partials:
Create scss/base/_index.scss:
|
0 1 2 3 4 5 6 7 8 |
@forward 'variables'; @forward 'reset'; @forward 'mixins'; |
Then in main.scss:
|
0 1 2 3 4 5 6 7 8 9 10 11 |
@use 'base'; // loads everything forwarded by base/_index body { font-family: base.$font-base; // or @use 'base' as b; → b.$font-base } |
This is super clean for large projects — one @use brings in many things.
5. Quick Comparison Table (2026 Perspective)
| Feature | @import (old) | @use (modern) | Winner |
|---|---|---|---|
| Namespace / scoping | Global everything | Scoped by default + namespace | @use |
| Can nest inside rules? | Yes | No (top-level only) | @import (but rarely needed) |
| Deprecation status | Deprecated since 1.80.0 | Recommended forever | @use |
| Duplicate CSS output | Deduped | Explicitly included only once | @use |
| Traceability (where from?) | Hard | Easy (namespace or file name) | @use |
| Future-proof | Will break in Dart Sass 3.0 | The future | @use |
6. Migration Tip (If You Have Old Code)
- Start new files with @use
- For old projects: install Sass migrator tool
Bash01234567npm install -g sass-migratorsass-migrator module --migrate-deps **/*.scss
It auto-converts @import → @use in many cases
- Suppress warnings temporarily if stuck: –quiet-deps flag in Sass command
You’ve now got the full picture: Partials = _name.scss files Old glue = @import (avoid new code) New glue = @use + optionally @forward for clean architecture
Next class — want to build a full modular folder structure example with variables + mixins + buttons + cards? Or explain @forward deeper with index files? Or how to handle global resets / fonts in modern Sass?
Just say — we’re making progress fast! 🚀
