When you define variables in SassScript at the top, they become global variables.
Global variables can be accessed anywhere in their module.
When you declare variables in a block { }, they become local variables and they can only be accessed inside that block.
What’s Shadowing in SassScript?
You can declare local variables with a same name as the global variables.
So, if there are multiple devs working on the same file and are not aware of the global variable name and declare a local variables with a same name, then no need to worry about SassScript failure. SassScript helps prevent that kind of failure.
Let’s modify the example above a bit and make the $font-size variable local and global both.
What if you want to change the value of a global variable from local scope?
In that case, we we can use !global flag.
When you assign a value to a variable using a !global flag, that value is always assigned to a global scope.
Let’s modify the same example above:
