Namespaces
Keep members organized and avoid naming collisions.
Syntax
@use 'file' as ns; file member -> ns.memberWhen you @use a file, its members live under a namespace derived from the file name. @use 'buttons' exposes buttons.$size and buttons.mixin-name().
Choosing namespaces
- Default — the last path segment:
@use 'forms/inputs'gives theinputsnamespace. - Alias —
@use 'long-name' as ln. - No namespace —
@use 'utils' as *makes members available unprefixed. Convenient, but risks collisions; use only for small, trusted helper files.
Example
@use 'sass:math'; // built-in module, namespace: math
@use 'theme/colors' as c; // alias namespace: c
@use 'helpers' as *; // no namespace (flattened)
.box {
width: math.div(100%, 3);
color: c.$text;
@include clearfix; // from helpers, unprefixed
}When to use it
- A monorepo has both a ui-kit and a brand-kit module; namespaces let developers write ui-kit.$spacing and brand-kit.$spacing without conflicts.
- A developer uses a short alias @use 'sass:math' as m to keep math.div() calls readable as m.div() throughout a utilities file.
- A team enforces module namespacing in code review to prevent two partials from accidentally overwriting each other's private variables in the same scope.
More examples
Default namespace from filename
Sass automatically uses the filename (without extension) as the namespace, prefixing all accessed members with typography.
// _typography.scss
$scale-base: 1rem;
$weight-bold: 700;
// main.scss
@use 'typography';
h1 {
font-size: typography.$scale-base * 2;
font-weight: typography.$weight-bold;
}Short alias for frequently used module
Assigns short aliases to both a built-in module and a design token partial, keeping usage lines concise while retaining clear attribution.
@use 'sass:math' as math;
@use 'tokens' as t;
.grid-col-6 {
width: math.percentage(math.div(6, 12));
padding: t.$space-4;
}Wildcard import removes namespace
The as * alias loads all members into the global scope — useful in a single entry file but risky in shared modules due to collision risk.
// Use sparingly — only in a top-level entry file
@use 'tokens' as *;
.btn {
color: $primary; // no namespace prefix needed
padding: $space-4;
}
Discussion