SASS | Sombreado y control de flujo

Shadowing y Flow control son métodos para cambiar el valor de las variables . Estos dos métodos son muy útiles cuando estamos trabajando con una biblioteca SASS. Lo discutiremos uno por uno.

1. Sombreado:
   las variables locales se pueden declarar con el mismo nombre que las variables globales. Si hacemos eso, el valor de esa variable en el ámbito local será el valor de la variable en ese ámbito local y no el valor global. Vea el ejemplo a continuación:

   Archivo SASS:

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

   Archivo CSS compilado:

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

   Ahora, ¿qué sucede si desea cambiar el valor de la variable global durante algún punto de la ejecución condicional o por cualquier motivo? SASS nos permite hacer eso usando !global después de la declaración de la variable local. Este concepto se llama ‘sombreado’ porque el cambio en el valor de la variable global usando !global se refleja en todo el documento y no solo después de la expresión !global.

   Archivo SASS:

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

   Archivo CSS compilado:

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

   Nota: !global solo se puede usar para las variables que ya están declaradas, de lo contrario generará un error durante la compilación.

   Uso: se utiliza cuando está utilizando una biblioteca SASS y desea cambiar el valor de la variable global declarada en la biblioteca.

2. Control de flujo: puede cambiar el valor de las variables utilizando la compilación de control de flujo. Aquí el valor de las variables cambiará justo después del bloque de control de flujo. El valor de las variables anteriores permanecerá como antes. Vea el ejemplo a continuación:

   Archivo SASS:

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

   Archivo CSS compilado:

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

   Uso: Esto es particularmente útil cuando estamos escribiendo nuestra propia biblioteca SASS y queremos permitir que los usuarios cambien nuestros valores de variables globales con una compilación condicional.