SASS | Variables

Este artículo incluye información sobre cómo definir una variable en SASS y el alcance de una variable.

Requisito previo: Variables en CSS

Ventajas de una variable:

1. Reduce la repetición de lo mismo una y otra vez.
2. Podemos realizar operaciones matemáticas sobre variables como +,-,/,* etc…, lo que facilita mucho nuestro trabajo.

1. Declaración de una variable en SASS: En SASS, puede definir una variable utilizando el símbolo $al comienzo del nombre de la variable y seguido de su valor.
   • Archivo SCSS:

     $textcolor: blue; $size: 10px; $border_changes: 1px solid rgba(255,153,153,0.2);    #para1 {     color: $textcolor;     font-size: $size;     border: $border_changes; }    // You can also use other variables // in the declaration of a variable    $border_changes2: 1px solid $textcolor;    #para2 {     color: $textcolor;     font-size: $size;     border: $border_changes2; }

   • Archivo CSS compilado:

     #para1 {   color: blue;   font-size: 10px;   border: 1px solid rgba(255, 153, 153, 0.2); }    #para2 {   color: blue;   font-size: 10px;   border: 1px solid blue; }

2. Comprensión del alcance de una variable: las variables SASS se pueden declarar en cualquier parte del documento antes de que se utilicen.
   1. Variables globales: las variables, que se declaran en la parte superior del archivo, son globales, es decir, puede usarlas en cualquier parte del documento.
   2. Variables con alcance: las variables que se declaran en cualquier bloque tienen un alcance, es decir, no puede usarlas fuera del alcance del bloque.
   • Archivo SASS:

     $global: #FF0000;    #para1 {     $local: #F0F000;     color: $local;     border: 1px solid $local; }    // You can not use $local outside of its // #para1{ } block. // This will generate error  // saying "undefined variable"    $global_onwards: #00FEF0;     h1 {     // You can not use $local here     color: $global;        // You can use $global_onwards,     border: 1px solid $global_onwards; }

   • Archivo CSS compilado:
     

Hay más conceptos sobre las variables, como el sombreado de una variable, el valor predeterminado de una variable, la declaración de variables de control de flujo. Discutámoslos a continuación uno por uno:

Valor predeterminado de las variables

SASS permite que un usuario declare algunos valores predeterminados para las variables que se pueden usar si la variable no se declara o no se le asigna un valor de ‘nulo’. Si una variable se declara con algún valor, ese valor se sobrescribe sobre el valor predeterminado. En SASS, la variable predeterminada se asigna con la etiqueta !default .

Sintaxis de la variable predeterminada:

 $color: black !default ; //black is the default value to the variable 'color' 

Sombreado de variables

En SASS, se pueden escribir dos variables con exactamente el mismo nombre: una global y otra local. En tal condición, el usuario puede cambiar por error el valor de la variable global al cambiar el valor de la variable local. Para evitar tal condición, SASS tiene la función de sombreado, en la que al escribir una variable local dentro de un ámbito local no cambia necesariamente el valor de la variable global.

A continuación se muestra un ejemplo para mostrar la funcionalidad anterior:

 //SASS Code file
$colour: black;
.nav
$colour: blue;
background-color: $colour;
.p
background-color: $colour; 

El código anterior cuando se compila en CSS nativo se convierte en:

.nav {
background-color: blue;
}
.p {
background-color: black;
}

Ahora, para cambiar el valor de la variable global desde el ámbito local, debemos mencionar la etiqueta “!global” al lado de la variable como se muestra a continuación:

 //SASS Code file\
$colour: black;
.nav
$colour: blue !global;
background-color: $colour;
.p
background-color: $colour;

El código anterior cuando se compila en CSS nativo se convierte en:

.nav {
background-color: blue;
}
.p {
background-color: blue;
}

Reglas de control de flujo de variables

Flow Control Scope ayuda a definir los valores de las variables en función del flujo del programa. Hacen que el código sea mucho más fácil de entender y hace que el código sea igual que otros lenguajes de programación como Java, C++, etc. Cambia los valores de algunas de las variables en función del valor de otras variables o características. A continuación se muestra un código de ejemplo que muestra las reglas de control de flujo de las variables:

 //SASS Code file
$bool: true;
$font_color: blue;
$bg_color: skyblue;
@if $bool
$font_color: violet;
$bg_color: pink;
.nav
background-color: $bg_color
color: $font_color

El código anterior cuando se compila en CSS nativo:

.nav {
background-color: pink;
color: violet;
}