[Sass] Local variables and global variables

[Sass] Local variables and global variables

The scope of variables in Sass has changed in the last few years. Until recently, the scope of declared variables in the ruleset and other scopes was local by default. If a global variable with the same name already exists, starting with version 3.4, Sass has been able to correctly handle the concept of scope and replace it by creating a new local variable.

Global variables and local variables

Let's take a look at the code example:

SCSS$color: Orange!default;//defines global variables (in selectors, functions, mixed macros ... Variables that are defined outside the global variable). Block {  color: $color;//Call global variable}em {  $color: red;//define local variable  a {    color: $color; /Call local variable  }}span {  color: $color;//Call global variable}

Results of CSS:

Css.block {  color:orange;} Em a {  color:red;} span {  color:orange;}

The above example demonstrates that variables defined inside an element do not affect other elements. It is easy to understand that a global variable is a variable that is defined outside of an element , as in the following code:

$color: Orange!default;

$color is a global variable, and a variable defined inside the element, such as $color: red; is a local variable .

In addition, Sass now provides a!global parameter.!global and!default are useful for defining variables.

Shadow of a global variable

When in a local scope (inside selectors, inside a function, in a mixed macro ... When declaring a variable that already exists in the global scope, the local variable becomes the shadow of the global variable . Basically, a local variable overrides a global variable only at a local scope .

The variable $color in the EM selector in the example above is the shadow of a global variable.

Scss$color:orange!default;//defines a global variable. Block {  color: $color;//Call global variable}em {  $color: red;//define local variables (global variables $color  a {    color: $color;//Call local variable  }}

When do I declare a variable?

My advice is to create variables that only apply to situations where the feeling is indeed necessary. Don't declare new variables for some hacker behavior, which doesn't work. You can create a new variable only if all of the following criteria are met:

1. This value recurs at least two times;
2. The value may be updated at least once;
3. All the performance of this value is related to the variable (not coincidental).

Basically, there is no reason to declare that a variable is never required to be updated or used only in a single place.

[Sass] Local variables and global variables