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:
     filter_none

     edit
     close

     play_arrow

     link
     brightness_4
     code

     $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; }

     chevron_right

     filter_none

   • Compiled CSS file:
     filter_none

     edit
     close

     play_arrow

     link
     brightness_4
     code

     #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; }

     chevron_right

     filter_none

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:
     filter_none

     edit
     close

     play_arrow

     link
     brightness_4
     code

     $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; }

     chevron_right

     filter_none

   • Compiled CSS file:
     

There are more concepts on variables, like Shadowing of a variable, default value of a variable, Flow-control declaration of variables, that will be discussed in the next articles.

Aakash_Panchal

Check out this Author's contributed articles.