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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to create a flip effect with CSS?CSSHow to add CurrencyPipe in TypeScript file in Angular 9 Project?AngularHow to use images instead of HTML radio buttons using CSS?CSSHow to load variables, functions, and mixins from another module in SCSS?SCSSHow to create a simple stopwatch using JavaScript?JavaScriptCheck whether a variable exists and not empty in PHPPHPHow services and dependency injection work in Angular?AngularNATURAL JOIN in PostgresPostgresHow to avoid element shift on border change while hovering in CSS?CSSHow to create a placeholder loader (throbber) using CSS?CSSWhat are keys in React?ReactHow to auto-resize textarea based on text input using JavaScript or jQuery?JavaScript