Providing Default Values for SCSS Variables

Image by Thor Deichmann from Pixabay

Scenario

We want to create default SCSS variables in default.scss that can be overridden as needed.

Approach

First create defaults.scss:

$primary: pink !default;

.u-text-color {
  color: $primary;
}

Then create override.scss to override the default.

$primary: gray;

When overrides.scss is imported first, those values will be used, and if values are not provided the default values will come into effect:

@import "overrides.scss";
@import "defaults.scss";

So in this case the css output will contain:

.u-text-color {
  color: gray;
}