Sass Default Values

How it works

!default assigns a variable only when it is undefined or null. It is useful for module configuration, not a lower-priority CSS declaration. A value such as false or zero is still a present configured value. Configure a reusable module with @use ... with rather than sharing mutable globals across files.

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

default-configuration.scss

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

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

Expected CSS

.screening-card {
  padding: 20px;
}

The earlier value remains twenty. This single-file fixture introduces the assignment rule; the module-configuration lesson tests an actual partial and entry point. A default is part of a library API, so choose a documented type and range.

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