Sass Module Configuration

How it works

A module may declare a variable with !default to make it configurable. The first @use can provide a replacement through with. This creates a clear build-time configuration point. The module below owns the card rule as well as its default; the application chooses a larger padding before that rule is emitted. Only documented public defaults should be treated as supported configuration.

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 module-configuration.scss module-configuration.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

module-configuration.scss

Download module-configuration.scss — save at the shown relative path.

@use "card" with (
  $space: 24px
);

_card.scss

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

$space: 12px !default;
.screening-card {
  padding: $space;
}

Expected CSS

.screening-card {
  padding: 24px;
}

The card module receives 24px before evaluating its declarations. Its own 12px default is skipped. Configure a module before another dependency loads it; attempting to reconfigure an already loaded module is an error rather than a second independent theme.

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