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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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 show and hide an element on click in React?ReactHow to create a function in SCSS (Sass)?SCSSJavaScript Number MethodsJavaScriptKeyValuePipe in Angular 9AngularHow to remove the Gutenberg Block Library CSS from WordPress?WordPressThe Drupal flowDrupalData Flows in ReactReactContainers 101: What are containers?MiscellaneousHow to reference an aliased column in the WHERE clause?SQL/MySQLJavaScript String Properties and MethodsJavaScriptKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousWordPress: How to display fields from ACF Flexible Contents?WordPress