The @use Rule
Load another Sass file and access its members through a namespace.
Syntax
@use 'path'; @use 'path' as alias; @use 'path' as *;@use loads variables, mixins, and functions from another file. Unlike the old @import, each file is loaded only once, and its members are accessed through a namespace (by default, the file name).
Custom namespace
Rename the namespace with as, or flatten it with as * (use sparingly).
Example
// _colors.scss
$brand: #CC6699;
@function tint($c) { @return mix(white, $c, 20%); }
// main.scss
@use 'colors';
@use 'colors' as c; // alternative alias
.btn { background: colors.$brand; }
.btn--soft { background: c.tint(c.$brand); }When to use it
- A developer loads a color tokens partial with @use 'tokens' and accesses colors as tokens.$primary, preventing naming collisions with other modules.
- A project replaces all legacy @import rules with @use so that each module is only compiled once regardless of how many files load it.
- A team uses @use to load sass:math and sass:color built-in modules so their arithmetic and color adjustments use the modern, safe API.
More examples
Loading a module with @use
Loads _tokens.scss as a namespaced module; all its variables are accessed with the tokens. prefix to avoid collisions.
// _tokens.scss
$primary: #2563eb;
$space-4: 1rem;
// main.scss
@use 'tokens';
.btn {
background: tokens.$primary;
padding: tokens.$space-4;
}Loading a built-in module
Uses @use to load the sass:math and sass:color built-in modules, then calls their functions with the module.function() syntax.
@use 'sass:math';
@use 'sass:color';
$base: 1rem;
$brand: #2563eb;
.card {
padding: math.div($base, 2);
background: color.adjust($brand, $lightness: 40%);
}Custom namespace with @use as
Renames a long module path to a short alias using 'as', making subsequent references concise without losing the namespace safety.
@use 'design-system/tokens' as t;
@use 'design-system/mixins' as mx;
.hero {
color: t.$primary;
@include mx.flex-center;
}
Discussion