How to use default values ​​for variables in SASS

Variables defined in SASS, the value set later will overwrite the old value.

$color: red;
$color: blue;

.btn {
    color: $color;
}

After compilation:

.btn {
  color: blue; }

If you write a UI library that provides SASS files, you may provide some parameters for users to customize when using it. Inside the SASS component, we need to apply these values ​​set by the user. But if the user does not customize the value of the variable, then these variables should have their own default values.

This cannot be achieved using the coverage mechanism mentioned above. Because no matter you set it before or after @importing the UI library, you cannot affect the value in this imported file. If you set the value before importing, the variables in the UI library will be overwritten and will not work. If your setting is after importing, it will be even more ineffective.

Assume this is the style file in the UI:

_lib.scss

$color: red;
.btn {
    color: $color;
}

Use in another file and try to customize the value of the variable:

page.scss

@import 'lib';
$color: blue;

or:

page.scss

$color: blue;
@import 'lib';

The compilation results of both are:

.btn {
  color: red; }

!default

For this situation, SASS provides the !default flag. Applying this identifier after a variable value means that if the variable is not defined elsewhere or even if it is defined but the value is null, then the default value set here will take effect, otherwise the value set elsewhere will be used.

Transform the above _lib.scss:

_lib.scss

- $color: red;
+ $color: red!default;
.btn {
    color: $color;
}

use:

$color: blue;

@import "lib";

Note: The custom value needs to be placed before @import, otherwise it will not take effect.

At this point the compilation result will be what you want, with the external custom variable values ​​applied.

.btn {
  color: blue; }

Related resources

• SASS Documentation - Default Values
• A Sass !default use case

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.