Skip to content
Related Articles

Related Articles

SASS | Variables
  • Last Updated : 27 Sep, 2019

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, that will be discussed in the next articles.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up
Recommended Articles
Page :