The Modern @use Module System

The @use rule loads a Sass module and exposes its public members through a namespace. This makes dependencies explicit and helps prevent accidental name collisions.

For example, @use "abstracts/tokens"; loads a module whose variables can be accessed through the tokens namespace. The consuming file can then reference tokens.$brand-color.

Use as to select an alias or as * to remove the namespace. Although as * can shorten names, it can also reintroduce naming collisions and hide dependencies. Explicit namespaces are generally easier to maintain in large projects.

Sass modules are loaded once within the module system, so repeated references to the same module do not behave like repeated textual concatenation of the source file.

Load Shared Tokens and Mixins

// abstracts/_tokens.scss
$brand-color: #5b5bd6;
$spacing-md: 1rem;

// abstracts/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// main.scss
@use "abstracts/tokens";
@use "abstracts/mixins";

.hero {
  padding: tokens.$spacing-md;
  background: tokens.$brand-color;
  @include mixins.flex-center;
}

💡 The example shows three conceptual files. The token and mixin modules expose their public members through their respective namespaces. In a real project, place each file at the path indicated by its comment. The @use statements belong at the beginning of the consuming stylesheet, before ordinary style rules.

Knowledge Check

How does `@use "abstracts/tokens";` expose a public variable by default?

The Modern @use Module System

STAY UPDATED WITH BYTES!