SASS | @if y @else

@if, @else, @else-if nos permite controlar el flujo en la compilación de archivos SASS como JavaScript.

1. @if : el bloque @if se compilará si el valor de la expresión condicional es verdadero.

   Sintaxis:

   @if <conditional_expression> { ... }

   Ejemplo 1: archivo SASS

   @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);
   }
   

   Ejemplo 1: archivo CSS compilado

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

   Ejemplo 2: archivo SASS

   @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);
   }
   

   Ejemplo 2: archivo CSS compilado

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

2. @else: si los valores de las expresiones condicionales de todos los bloques @if o @else-if anteriores son falsos, entonces se compilará este bloque.

   Sintaxis:

   @else { ... }

   Archivo SASS:

   @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);
   }
   

   Archivo CSS compilado:

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

3. @else if: se compilará el primer bloque @else-if con el valor de expresión condicional verdadero. Si ninguna expresión de bloque @else-if se evalúa como verdadera, se compilará el bloque @else.

   Sintaxis:

   @else if <conditional_expression> { ... }

   Archivo SASS:

   @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);
   }
   

   Archivo CSS compilado:

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