The `!default` Flag in SASS

This article explains the !default flag in SASS.

We will explain the !default flag in detail and show how to use it with practical examples.

YouTube Video

The !default Flag in SASS

The !default flag in SASS is an important tool for improving modularity and reusability of stylesheets. By using this flag, you can set default values for variables while allowing values defined elsewhere to take precedence. Here, we will explain the !default flag in detail and demonstrate its usage with practical examples.

The !default flag is a SASS-specific feature used to set default values for variables. By adding this flag, the following behavior is achieved:.

• Specifying Default Values The value is only set if the variable is not defined elsewhere.

• Controlling Precedence If the variable is already defined, its value will not be overwritten.

This feature is especially useful when building modules and libraries. Users can set custom values, but if none are specified, the default values will be used.

Basic Example

The following code demonstrates the basic usage of the !default flag.

1// _variables.scss
2$primary-color: blue !default;

• Defining the default variable $primary-color using the !default flag.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• Importing variables using @use and overriding $primary-color with with.

Output CSS

1body {
2    background-color: red;
3}

• In this example, since $primary-color is set to red in main.scss, the blue defined in _variables.scss will not be used.

When a Variable is Undefined

If the variable is not defined in main.scss, the default value will be used.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• Since the variable is imported without overriding, the default value blue for $primary-color defined in _variables.scss is applied.

Output CSS

1body {
2    background-color: blue;
3}

Usage in Nested Modules

Using !default within modules allows for flexible customization.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• Defining $primary-color and $button-color with the !default flag.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• Importing the variables module and specifying the color of .button using the $button-color variable.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• Using @use with with to override $button-color with orange, and using the buttons module.

Output CSS

1.button {
2    color: orange;
3}

• In this way, modules provide default values while respecting user-defined settings.

Points to Note

When using the !default flag, the following points should be considered:.

• Choosing Appropriate Default Values Default values should be chosen to cover common use cases.

• Intentional Design Use consistent variable names and avoid conflicts with other modules.

• Order Verification For the !default flag to function as intended, the order of variable overrides must be managed correctly.

Practical Scenarios

Theme Switching

For example, when creating a library that supports themes, you can use !default to provide customizable default values.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• Defining $background-color and $text-color with the !default flag for the theme, and applying them to the body.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• Customizing the theme by overriding $background-color with @use and with.

Output CSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Reusable Components

In a reusable button component, you can provide default styles while allowing users to override the color.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• Defining the default background and text colors for buttons with !default and applying the styles.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• Customizing the button color by overriding $button-bg with @use and with.

Output CSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Summary of the !default Flag

The !default flag in SASS is a powerful tool when building modules and libraries. It enhances reusability while enabling flexible customization.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video