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

Check out this Author's contributed articles.

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.