Sass Variables

Sass/Scss Variable is one of the features of SCSS that makes writing CSS styling more dynamic. In Scss, we can declare and define variables using the $ sign, naming the variable and then providing value to the variable.

Let's take a look at the syntax for defining variable in Scss:

$variable-name: variable value

The variable declaration begins with $, followed by the variable name, then a colon(:) symbol and finally the value for the variable. Just like variables in any other scripting or programming language, in Scss as well, variables hold values that can then be used throughout the stylesheet.

SASS Variables to Define Default Values

We can use SASS variables to define default values.

For example, on Studytonight's website, we use purple and orange colors for some special text, buttons, and some backgrounds too. As we use CSS, we have to use the Hexa code for the colors everywhere, but using Sass we can define a variable and then use the variable name wherever we want. Let's take an example,

// define the variable
$purple: #6A67CE;

.purple-btn
{
	text-align: center;
	background-color: $purple;
}
.purple-text
{
	color: $purple;
}

One more important point in defining and using variables in Sass/Scss is that if you define a variable with name having a hyphen or underscore, can be used interchangeably. For example,

// define the variable
$purple-color: #6A67CE; 
.purple-btn 
{ 
    text-align: center; 
    background-color: $purple-color; 
} 
.purple-text 
{ 
    color: $purple_color;
}

In the code above $purple-color and $purple_color will return the same value #6A67CE, so hyphen and underscore is treated as the same in variable name.

What to store in Scss Variable and Why?

Well, whatever you want. It is just like a normal variable. Whatever you use frequently like Hexa codes for colors or some specific font style etc can be defined as a variable at one place and then used over and over again in the stylesheet.

Also, another benefit of using variables is that if you want to change the value of some Hexa color, you do not have to change the value everywhere, you only need to change the value at one place.

Rest, its your choice, you can define as many variables as you want and use them in your Scss code.

Scope of Scss Variables (Shadowing)

Just like other programming/scripting languages, variables in Scss also have scope. To understand how scope works, let's take an example,

// define the variable
$purple: #6A67CE;

.purple-btn 
{ 
    text-align: center; 
    // re-defining the variable
    $purple: red;
    background-color: $purple; 
} 
.purple-text 
{ 
    color: $purple; 
}

The above code will compile into the following CSS code,

.purple-btn
{
    text-align: center;
    background-color: red;
}
.purple-text
{
    color: #6A67CE;
}

As you can see that the value of the variable $purple inside the .purple-btn style class is red rather than #6A67CE, this is the result of scope of variable.

!global Switch

You can use the !global switch to define a global variable from within a scope. But it is not recommended, because using the !global switch to define a global variable from within any selector will change the value of the variable for the entire stylesheet. Let's take an example for this.

// define the variable
$purple: #6A67CE;

.purple-btn 
{ 
    text-align: center; 
    // re-defining the variable
    $purple: red !global;
    background-color: $purple; 
} 
.purple-text 
{ 
    color: $purple; 
}

The above code will compile into the following CSS code,

.purple-btn
{
    text-align: center;
    background-color: red;
}
.purple-text
{
    color: red;
}

As you can see in the code above, using the !global switch we can change the value for the variable for the entire stylesheet.