SASS | Shadowing and Flow Control

Shadowing and Flow control are methods of changing the value of variables. These two methods are very useful when we are working with a SASS library. We will discuss it one by one.

  1. Shadowing:
    Local variables can be declared with the same name as Global variables. If we do that then the value of that variable in the local scope will be the value of the variable in that local scope and not global value. See the example below:

    SASS file:



    $global_local: global-value;
    
    ul {
        $global_local: local-value;
        width: $global_local; 
    }
    
    span {
        width: $global_local;
    }
    

    Compiled CSS file:

    ul {
      width: local-value;
    }
    
    span {
      width: global-value;
    }
    

    Now, what if you want to change the value of the global variable during some point of conditional execution or for any reason? SASS allows us to do that using !global after the local variable declaration. This concept is called ‘Shadowing’ because the change in global variable value using !global reflects in the whole document and not just after the !global expression.

    SASS file:

    $global_local: global-value;
    
    ul {
        $global_local: local-value !global;
        width: $global_local; 
    }
    
    span {
        width: $global_local;
    }
    

    Compiled CSS file:

    ul {
      width: local-value;
    }
    
    span {
      width: local-value;
    }
    

    Note: !global can only be used for the variables which are already declared, otherwise it will generate an error while compilation.

    Usage: It is used when you are using a SASS library and you want to change the value of the global variable declared in the library.

  2. Flow Control: You can change the value of variables using the flow control compilation. Here the value of the variables will change just after the flow control block. The value of variables before it will remain as it is before. See the example below:

    SASS file:

    // This is default mode
    $background-color-alpha: 0.5;
    
    
    @mixin flow-control($dark-mode) {
    
      // If you want to have dark mode then 
      // use flow-control to make the color dark
      @if $dark-mode {
        $background-color-alpha: 1 !global;
      }
    
      background-color: rgba(250, 0, 100, $background-color-alpha);
      display: block;
      border-radius: 15px;
      color: white;
    
    }
    
    .button {
      @include flow-control(true);
    }
    

    Compiled CSS file:

    .button {
      background-color: #fa0064; // rgba(250, 0, 100, 1);
      display: block;
      border-radius: 15px;
      color: white;
    }
    

    Usage: This is particularly useful when we are writing our own SASS library and we want to allow users to change our global variable values with a conditional compilation.



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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.