Variables Sass

Las variables son una forma de almacenar información que puede reutilizar más adelante. Con Sass, puedes almacenar información en variables, como:

• Strings
• Numbers
• Colors
• Booleans
• Lists
• Nulls

Sass usa el símbolo $, seguido de un nombre, para declarar variables, su sintaxis es la siguiente:

$variablename: value;

El siguiente ejemplo declara 4 variables llamadas myFont, myColor, myFontSize y myWidth. Después de declarar las variables, puedes usar las variables donde quieras:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

Cuando se transpila el archivo Sass, toma las variables (myFont, myColor, etc.) y genera un CSS normal con los valores de las variables colocados en el CSS, así:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

Alcance variable Sass

Las variables de Sass solo están disponibles en el nivel de anidamiento en el que están definidas. Mira el siguiente ejemplo:

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

¿El color del texto dentro de una etiqueta <p> será rojo o verde? ¡Será rojo!. La otra definición, $myColor: green; está dentro de la regla <h1>, ¡y solo estará disponible allí!. Entonces, la salida CSS será:

h1 {
  color: green;
}

p {
  color: red;
}

Ok, ese es el comportamiento predeterminado para el alcance de la variable.

Usar !global

El comportamiento predeterminado para el ámbito de la variable se puede anular utilizando el modificador !global. !global indica que una variable es global, lo que significa que es accesible en todos los niveles. Mira el siguiente ejemplo (igual que el anterior, pero con !global agregado):

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

¡Ahora el color del texto dentro de una etiqueta <p> será verde!. y la salida CSS será:

h1 {
  color: green;
}

p {
  color: green;
}

Sugerencia: las variables globales deben definirse fuera de cualquier regla. Sería conveniente definir todas las variables globales en su propio archivo, denominado «_globals.scss», e incluir el archivo con la palabra clave @include.a