The @use Rule

What Does @use Do?

@use loads the variables, mixins, and functions from another Sass file (or a built-in module) and makes them available through a namespace. It is the direct, modern replacement for the legacy @import rule.

Because @use loads a file only once no matter how many other files reference it, it also prevents duplicated CSS output and eliminates a whole class of load-order bugs that were common with @import.

// _buttons.scss
$radius: 6px;

.btn {
  border-radius: $radius;
}

// main.scss
@use 'buttons';

.btn-outline {
  border-radius: buttons.$radius;
}

The default namespace, buttons, comes directly from the filename _buttons.scss (the underscore and extension are dropped).

@use Syntax Variations

@use 'path';
@use 'path' as alias;
@use 'path' as *;
@use 'path' with ($var: value);

• @use 'path'; loads a file with the default namespace (its filename, without underscore or extension).
• @use 'path' as alias; renames the namespace to something custom.
• @use 'path' as *; removes the namespace, use only when collisions are truly impossible.
• @use 'path' with (...) configures !default variables in the loaded file before it runs.

@use Rule Cheatsheet

The most common ways to load a module with @use.

Default and Custom Namespaces

By default, the namespace is the last component of the loaded file's path, with any leading underscore and file extension removed. If two files with the same name live in different folders, you must alias at least one to avoid a namespace clash.

@use 'components/buttons';       // namespace: buttons
@use 'legacy/buttons' as legacyBtn; // namespace: legacyBtn

Configuring Modules With with()

If a partial defines variables using !default, you can override those defaults at the moment you load it using the with() clause, without editing the partial's source at all.

// _theme.scss
$primary: blue !default;
$radius: 4px !default;

// main.scss
@use 'theme' with (
  $primary: #16a34a,
  $radius: 8px
);

with() only works with variables marked !default, and only on the first load of that module.

Loading Built-in Modules

Sass ships several built-in modules, sass:math, sass:color, sass:list, sass:map, sass:string, and sass:meta, that you load the same way as your own files, using the sass: prefix.

@use 'sass:math';
@use 'sass:color';

.box {
  width: math.div(100%, 3);
  background: color.adjust(#2563eb, $lightness: 10%);
}

Common Mistakes

• Trying to override a variable with with() when it wasn't declared with !default in the source file, which raises a compile error.
• Forgetting the namespace prefix and writing $primary instead of colors.$primary after loading with @use.
• Placing a @use statement after other code in the file; all @use/@forward rules must come first, before any other statements.
• Loading the same file twice with two different aliases, which works but makes the codebase inconsistent and harder to search.

Key Takeaways

• @use loads another file's variables, mixins, and functions behind a namespace.
• The default namespace comes from the filename, and can be renamed with as or removed with as *.
• with() configures a module's !default variables at load time, without editing the source file.
• Built-in Sass modules (sass:math, sass:color, and others) are loaded with @use just like your own files.