YogeshChauhan . com

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Can we execute conditions in SQL?SQL/MySQLUNION and UNION ALL in PostgresPostgresHow to force your website to load securely with an .htaccess file?MiscHow to include CSS and JavaScript files in your WordPress plugin?WordPressWhat’s new in Constructor in PHP 8?PHPHow to remove N/A from Radio Button list in Drupal?DrupalWhat are Class Constants in PHP?PHPKilling A Project Part 3: How can an organization ensure that a doomed project is killed as early as possible?MiscLearn to Implement Estimated Reading Time using PHP Part 1: The BasicsPHPHow to create two segues with two UIButtons on a single page (Swift 5.0)?SwiftCSS Overflow Property with ExamplesCSSJavaScript: Methods for HTML DOM classList PropertyJavaScript