The `!global` Flag in SASS

This article explains the !global flag in SASS.

We will explain the detailed mechanism, usage examples, and precautions of the !global flag.

YouTube Video

The !global Flag in SASS

In SASS, the !global flag is used to manipulate the scope of variables. By understanding this flag correctly and using it appropriately, you can prevent unexpected behavior in your code and improve maintainability.

What is the !global Flag?

Normally, SASS variables have a scope. By default, variables are only valid within the scope in which they are defined. In other words, if a variable is defined inside a function or mixin, it cannot be accessed outside that scope.

However, by using the !global flag, you can directly assign the variable to the global scope. This allows variables to be shared across scopes.

Without the !global Flag

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue; // Local variable (does not overwrite the global variable)
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // red
10}

• In this code, $color is defined in the global scope, so the color property of .change remains red.

Output CSS

1.change {
2    color: red;
3}

With the !global Flag

Let’s add the !global flag to the same example.

 1$color: red; // Global Variable
 2
 3@mixin change-color() {
 4    $color: blue !global; // Overwrite the global variable
 5}
 6
 7.change {
 8    @include change-color();
 9    color: $color; // blue
10}

• In this case, because the !global flag is specified, the value of $color is updated in the global scope. As a result, the color property of .change becomes blue.

Output CSS

1.change {
2    color: blue;
3}

Precautions for Use

• Global Scope Pollution Excessive use of the !global flag can lead to unexpected scope conflicts and pollution of the global scope. This is especially important in large projects, where overusing this flag should be avoided.

• Unintended Value Overwrites When using the !global flag, variables with the same name may be unintentionally overwritten elsewhere. Therefore, consistent and clear naming of variables is necessary.

Practical Example

The following is an example of correctly using the !global flag.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4@mixin set-theme($primary, $secondary) {
 5    $primary-color: $primary !global;
 6    $secondary-color: $secondary !global;
 7}
 8
 9.light-theme {
10    @include set-theme(#ffffff, #dddddd);
11}
12
13.dark-theme {
14    @include set-theme(#333333, #666666);
15}
16
17body {
18    background-color: $primary-color;
19    color: $secondary-color;
20}

• In this code, the set-theme mixin can be used to dynamically switch themes. Since global variables are updated for each theme, multiple themes can be managed flexibly.

Output CSS

1body {
2    background-color: #333333;
3    color: #666666;
4}

Common Mistakes and Countermeasures

Forgetting the Flag

If you forget to add !global, variables may not be updated in the intended scope. Be sure to explicitly add the flag when necessary.

1@mixin update-color() {
2    $color: green; // Local variable (does not overwrite the global variable)
3}
4
5@mixin update-color-global() {
6    $color: green !global; // Overwrite the global variable
7}

Excessive Dependence on the Global Scope

Relying too heavily on the !global flag can make debugging and maintenance of code difficult. Its use should be kept to a minimum.

Summary

The !global flag in SASS is very useful in specific situations, but it should be used with caution. By clearly understanding variable scope and properly managing the global scope, you can create highly maintainable SASS code.

The following are key points to keep in mind:.

1. Variables depend on their scope by default.

2. The !global flag allows you to update variables in the global scope.

3. Keep the use of flags to a minimum and avoid unintended overwrites whenever possible.

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