SASS | @if and @else

@if, @else, @else-if allows us to control flow in SASS file compilation like JavaScript.

1. @if: @if block will be compiled if the value of the conditional expression is true.

   Syntax:

   @if <conditional_expression> { ... }

   Example 1: SASS file

   @mixin button-format( $round-button, $size ) {
       color: white;
       background-color: blue;
       width: $size;
   
       @if $round-button {
           height: $size;
           border-radius: $size / 2; 
       }
   }
   
   .mybutton{
       @include button-format(false, 100px);
   }
   

   Example 1: Compiled CSS file

   .mybutton {
     color: white;
     background-color: blue;
     width: 100px;
   }
   

   Example 2: SASS file

   @mixin button-format( $round-button, $size ) {
       color: white;
       background-color: blue;
       width: $size;
   
       @if $round-button {
           height: $size;
           border-radius: $size / 2; 
       }
   }
   
   
   .mybutton{
       @include button-format(true, 100px);
   }
   

   Example 2: Compiled CSS file

   .mybutton {
       color: white;
       background-color: blue;
       width: 100px;
       height: 100px;
       border-radius: 50px;
   }
   

2. @else: If the values of conditional expressions of all the above @if or @else-if blocks are false, then this block will be compiled.

   Syntax:

   @else { ... }

   SASS file:

   @mixin theme ($theme-decide, $r, $g, $b) {
       // light background
       @if $theme-decide {
           background-color: rgba($r, $g, $b, 0.5);
       }
       // dark background
       @else {
           background-color: rgba($r, $g, $b, 1); // red color
       }
   
   }
   
   .myblock {
       @include theme(false, 255, 0, 0);
   }
   

   Compiled CSS file:

   .myblock {
       background-color: red;
       // if true value is passed then rgba(255, 0, 0, 0.5);
   }
   

3. @else if: The first @else-if block with conditional expression value true will be compiled. If no @else-if block expression evaluates to true then @else block will be compiled.

   Syntax:

   @else if <conditional_expression> { ... }

   SASS file:

   @mixin theme ($theme-decide, $r, $g, $b) {
       // light background
       @if $theme-decide == 1 {
           background-color: rgba($r, $g, $b, 0.5);
       }
       // medium-dark background
       @else if $theme-decide == 2 {
           background-color: rgba($r, $g, $b, 0.7);
       }
       // dark background
       @else {
           background-color: rgba($r, $g, $b, 1);
       }
   
   }
   
   .myblock {
       @include theme(2, 0, 255, 0);
   }
   

   Compiled CSS file:

   .myblock {
     background-color: rgba(0, 255, 0, 0.7);
   }
   

My Personal Notes arrow_drop_up

Save