SASS | Variables

This article includes information about how to define a variable in SASS and scope of a variable.

Prerequisite: Variables in CSS

Advantages of a variable:

1. Reduces the repetition of the same thing again and again.
2. We can perform mathematical operations over variable like +,-,/,* etc… , which makes our work lot more easier.

1. Declaration of a variable in SASS: In SASS, you can define a variable by using $ symbol at the starting of the name of the variable and followed by its value.
   • SCSS file:

     $textcolor: blue;
     $size: 10px;
     $border_changes: 1px solid rgba(255,153,153,0.2);
     
     #para1 {
         color: $textcolor;
         font-size: $size;
         border: $border_changes;
     }
     
     // You can also use other variables
     // in the declaration of a variable
     
     $border_changes2: 1px solid $textcolor;
     
     #para2 {
         color: $textcolor;
         font-size: $size;
         border: $border_changes2;
     }
   • Compiled CSS file:

     #para1 {
       color: blue;
       font-size: 10px;
       border: 1px solid rgba(255, 153, 153, 0.2);
     }
     
     #para2 {
       color: blue;
       font-size: 10px;
       border: 1px solid blue;
     }
2. Understanding scope of a variable: SASS variables can be declared anywhere in the document before it is used.
   1. Global Variables: Variables, which are declared at the top of the file, are global i.e., you can use it anywhere in the document.
   2. Scoped Variables: Variables, which are declared in any block, are scoped i.e., you can not use it outside of the scope of the block.
   • SASS file:

     $global: #FF0000;
     
     #para1 {
         $local: #F0F000;
         color: $local;
         border: 1px solid $local;
     }
     
     // You can not use $local outside of its
     // #para1{ } block.
     // This will generate error
     // saying "undefined variable"
     
     $global_onwards: #00FEF0;
     
     h1 {
         // You can not use $local here
         color: $global;
     
         // You can use $global_onwards,
         border: 1px solid $global_onwards;
     }
   • Compiled CSS file:
     

There are more concepts on variables, like Shadowing of a variable, default value of a variable, Flow-control declaration of variables. Let’s discuss them below one by one :

Default Value of Variables

SASS allows a user to declare some default values to variables which can be used if the variable is not declared or assigned a value of ‘null’. If a variable is declared with some value , then that value is overwritten over the default value. In SASS , the default variable is assigned with the !default tag.

Syntax of default variable :

 $color: black !default ; //black is the default value to the variable 'color' 

Shadowing of Variables

In SASS , one can write two variables with exactly same name : one global and one local. In such condition , user may mistakenly change the value of global variable by changing the value of the local variable. To avoid such a condition, SASS has the shadowing feature, in which on writing a local variable inside a local scope doesn’t necessarily change the value of the global variable.

Given below is an example to show the above functionality :

 //SASS Code file
$colour: black;
.nav
$colour: blue;
background-color: $colour;
.p
background-color: $colour; 

The above code when compiled to native CSS becomes:

CSS

.nav {
background-color: blue;
}
.p {
background-color: black;
}

Now, to change the value of the global variable from the local scope , we need to mention the “!global” tag beside the variable as shown below:

 //SASS Code file\
$colour: black;
.nav
$colour: blue !global;
background-color: $colour;
.p
background-color: $colour;

The above code when compiled to native CSS becomes :

CSS

.nav {
background-color: blue;
}
.p {
background-color: blue;
}

Flow Control Rules of Variables

Flow Control Scope helps to define the values of the variables based on the flow of the program. They makes the code much easier to understand and makes the code just like the other programming languages like Java , C++ etc. It changes the values of some of the variables based on the value of some other variables or features. Given below is an example code that displays flow control rules of variables:

 //SASS Code file
$bool: true;
$font_color: blue;
$bg_color: skyblue;
@if $bool
$font_color: violet;
$bg_color: pink;
.nav
background-color: $bg_color
color: $font_color

The above code when compiled to native CSS :

CSS

.nav {
background-color: pink;
color: violet;
}