Variables Sass

Variables Sass

Una variable es una forma de almacenar información que puede repetirse más tarde.

A través de Sass, puedeinformaciónse almacenan en variables, por ejemplo:

• cadena
• número
• color
• booleano
• lista
• null

Sass utiliza el símbolo $ seguido del nombre para declarar variables:

Sintaxis de variables Sass

$variablename: value;

El siguiente ejemplo declara 4 variables:

• myFont
• myColor
• myFontSize
• myWidth

Después de declarar las variables, puede usarlas en cualquier lugar:

Sintaxis de SCSS:

$myFont: Helvetica, sans-serif;
$myColor: rojo;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}

Por lo tanto, cuando el archivo Sass se transpila, utiliza las variables (myFont, myColor, etc.) y produce CSS común y coloca los valores de las variables en el CSS, como se muestra a continuación:

Salida de CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: rojo;
}
#container {
  width: 680px;
}

Rango de variables Sass

Las variables Sass solo están disponibles en el nivel de anidación en el que se definen.

Por favor, vea el siguiente ejemplo:

Sintaxis de SCSS:

$myColor: rojo;
h1 {
  $myColor: verde;
  color: $myColor;
}
p {
  color: $myColor;
}

<p> ¿El color del texto dentro de la etiqueta será rojo o verde? ¡Será rojo!

Otra definición, $myColor: verde; se encuentra en <h1> dentro de la regla y solo allí está disponible!

Por lo tanto, la salida de CSS será:

Salida de CSS:

h1 {
  color: verde;
}
p {
  color: rojo;
}

Bueno, esto es el comportamiento predeterminado de alcance de variables.

Uso de Sass !global

Se puede usar !global Switch cubre el comportamiento predeterminado de alcance de variables.

!global indica que la variable es global, lo que significa que se puede acceder a ella en todos los niveles.

Vea el siguiente ejemplo (igual que el anterior, pero con !global）：

Sintaxis de SCSS:

$myColor: rojo;
h1 {
  $myColor: verde !global;
  color: $myColor;
}
p {
  color: $myColor;
}

Ahora <p> El color del texto dentro de la etiqueta será verde!

Por lo tanto, la salida de CSS será:

Salida de CSS:

h1 {
  color: verde;
}
p {
  color: verde;
}

Consejo:Las variables globales deben definirse fuera de cualquier regla. Lo más inteligente es definir todas las variables globales en su propio archivo, llamado "_globals.scss", y usar @include Palabras clave que contienen este archivo.