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

      
      

    • 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

      
      

  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

      
      

    • 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.



My Personal Notes arrow_drop_up

I am doing BTech at Dhirubhai Ambani Institute of Information and Communication Technology

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.