Yogesh Chauhan's Blog

Variables scope and shadowing in SCSS (Sass)

in SCSS on May 9, 2021

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:


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to calculate elapsed time in JavaScript?JavaScriptWhat are Google Web Stories and How to create them in WordPress?WordPressHow to set opacity or transparency using CSS?CSSHow JavaScript classes allows us to do less typing (syntactic sugar)?JavaScriptA short basic guide on states in ReactReactThe Difference Between Arrays and Objects in JavaScriptJavaScriptThe Drupal flowDrupalAdvanced nesting in Sass (SCSS) using at-rootSCSSFor In Loop in Swift for BeginnersSwiftHow can one check to see if a remote file exists using PHP?PHPNumber Properties in JavaScriptJavaScriptJSON.stringify() in JavaScriptJavaScript