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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS? #Jan 8 How to Install Xcode Command Line Tools on MacOS?
You might also like these
Configuring Modules with @forward rule in SCSS (Sass)SCSSHow to test the WordPress 5.9 Beta 4?WordPressWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscellaneousWhat’s a Strict mode in JavaScript?JavaScriptRecursion in JavaScriptJavaScriptHow to apply style to a specific child element using CSS?CSSRelative Length Units in CSSCSSSteps to Secure a VPNMiscellaneousHow to check if the element exists using JavaScript and jQuery?JavaScriptHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPWhat is an API?MiscellaneousHow to use @each rule with key-value pair in SCSS?SCSS