Open In App

SASS | Shadowing and Flow Control

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.


Last Updated : 11 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads