Sass Use Modules

How it works

@use loads a stylesheet as a module. Members are accessed through its namespace, which shows where a value comes from and avoids accidental global name collisions. The entry stylesheet below reads a space token from a sibling partial. Save both files with the shown names in the same lesson folder. Sass finds the underscore-prefixed partial when resolving the module URL.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass use.scss use.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

use.scss

Download use.scss — save at the shown relative path.

@use "tokens";
.screening-card {
  padding: tokens.$space;
}

_tokens.scss

Download _tokens.scss — save at the shown relative path.

$space: 16px;

Expected CSS

.screening-card {
  padding: 16px;
}

The tokens namespace comes from the file name. The partial does not emit CSS by itself, so the output contains only the component rule. Keep @use before ordinary style rules, and do not paste the partial into the entry as a substitute for testing module resolution.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.