Share
En este artículo, vamos a echar un vistazo más profundo a las variables y variables alcance en sass. El alcance de una variable describe el contexto dentro del cual se define y, por lo tanto, dónde está disponible para usar.
Para empezar, cubriré los alcances que soporta Sass. Luego, explicaré dos indicadores útiles que podemos usar para personalizar el valor de una variable. Finalmente, presentaré brevemente las funciones disponibles para verificar si existe una variable o no.
Sass soporta dos tipos de variables: local variables y global variables.
Por defecto, todas las variables definidas fuera de cualquier selector se consideran variables globales. Eso significa que se puede acceder a ellos desde cualquier lugar en nuestras hojas de estilo. Por ejemplo, aquí hay una variable global:
$ bg-color: verde;
Por otro lado, las variables locales son aquellas que se declaran dentro de un selector. Más adelante, examinaremos cómo podemos personalizar ese comportamiento. Pero por ahora, veamos nuestro primer ejemplo..
Aquí definimos una mezcla y luego la btn-bg-color variable dentro de ella. Esta es una variable local, y por lo tanto es visible solo para el código dentro de esa mezcla:
@mixin button-style $ btn-bg-color: lightblue; color: $ btn-bg-color;
A continuación, podemos llamar al mixin de la siguiente manera:
botón @include button-style;
El CSS resultante:
botón color: azul claro;
Sin embargo, imagine que también queremos usar esta variable (no la mezcla) en otro selector:
.envolver fondo: $ btn-bg-color;
Esto nos daría el siguiente error:
Variable no definida: "$ btn-bg-color".
Eso era de esperarse, ¿verdad? Intentamos acceder a una variable mixin, que está localizada en el ámbito. Sin embargo, no se preocupe, como se mencionó anteriormente, solucionaremos este problema en una próxima sección.
También vale la pena mencionar que si declaramos una variable dentro de un selector, cualquier otro selector anidado puede acceder a ella. Aquí hay un ejemplo:
.envoltura $ bg-color: rojo; &: después de fondo: aclarar ($ bg-color, 10%);
Esto compila a:
.ajuste: después de background: # ff3333;
Sin embargo, mire el ejemplo a continuación donde definimos una función, luego use esa función junto con un selector anidado:
@function my-function () $ text-color: black; @return $ text-color; .wrap color: my-function (); &: después de background: $ text-color;
Si intentamos compilar esto, obtendremos el mismo error discutido antes. De nuevo, eso sucede porque no podemos acceder a la color de texto variable. No es directamente definido dentro del selector principal, pero dentro de la función que nuestro selector llama.
Las variables globales y locales pueden tener los mismos nombres. Para demostrar ese comportamiento, trabajaremos en un cuarto ejemplo:
$ texto-color: tomate; @mixin button-style $ text-color: lime; color: $ texto-color; @mixin link-style $ text-color: black; color: $ texto-color;
Aquí hemos definido tres variables diferentes (color de texto) con el mismo nombre. La primera es una variable global, mientras que las otras dos son locales..
Aquí hay algunos estilos haciendo uso de ellos:
botón @include button-style; a @include link-style; .wrap background: $ text-color;
Y el CSS generado:
botón color: lima; a color: negro; .wrap fondo: tomate;
Es eso lo que estabas esperando?
Tenga en cuenta que no veremos estos estilos a menos que compilemos con la versión actual de Sass (3.4). Por ejemplo, suponiendo que usemos Sass 3.3, nuestra salida de CSS se vería así:
botón color: lima; a color: negro; .wrap fondo: negro;
Observe la diferencia en el color de fondo de la .envolver selector. Esto sucede porque de acuerdo con las versiones anteriores de Sass (igual para LibSass), si redefinimos localmente el valor de una variable global (por ejemplo,. color de texto), este será el nuevo valor de la variable (global). Entonces, en nuestro ejemplo, los estilos compilados dependen del orden en el que declaramos la variable y los mixins.
Accentsconagua
defecto banderaEste indicador nos permite establecer el valor de una variable en caso de que aún no se haya establecido o su valor actual sea nulo (tratado como no asignado). Para explicar mejor cómo podemos aprovecharla en un escenario real, supongamos que tenemos un proyecto con la siguiente estructura:
Nombre del proyecto / ├──… ├── css / │ └── app.css └── scss / ├── _config.scss ├── _variables.scss ├── _mixins.scss └── app.scss
los app.scss archivo se ve así:
@import "config"; @importar "variables"; @import "mixins"; botón @include button-style; // más estilos
Veamos los contenidos de los archivos parciales..
En primer lugar, el variables.scss archivo contiene nuestras variables:
$ btn-bg-color: lightblue! predeterminado; $ btn-bg-color-hover: oscurecer ($ btn-bg-color, 5%); // más variables
Observe la defecto bandera asignada a la btn-bg-color variable.
En segundo lugar, el mixins.scss archivo incluye nuestros mixins:
@mixin button-style ($ bg-color: $ btn-bg-color, $ bg-color-hover: $ btn-bg-color-hover) background-color: $ bg-color; // más estilos &: hover background-color: $ bg-color-hover; // más estilos // más mixins
Entonces, la generada app.css El archivo será el siguiente:
botón color: azul claro; botón: desplazarse fondo-color: # 99cfe0;
Por lo tanto, nuestros botones vienen con estilos predeterminados. Pero supongamos que queremos tener la opción de sobrescribirlos aplicando nuestros valores personalizados. Para hacer esto, podemos reasignar las variables deseadas (predeterminadas) en el config.scss archivo parcial:
$ btn-bg-color: chocolate; // más variables
Ajustando el valor de esta variable a chocolate resultará en ignorar el valor correspondiente (azul claro) que ha recibido el defecto bandera. Por lo tanto, el CSS generado cambia como podemos ver a continuación:
botón color: chocolate; botón: desplazarse fondo-color: # bc5e1b;
Nota: en caso de que no hayamos agregado el defecto bandera a la btn-bg-color variable, nuestro CSS sería, debido a la naturaleza en cascada de CSS, de la siguiente manera:
botón color: azul claro; // hover estilos
global banderaEsta segunda bandera nos ayuda a cambiar el alcance de una variable local.
¿Recuerdas el error que vimos en nuestro primer ejemplo? Bueno, eso sucedió porque intentamos usar el btn-bg-color variable en el .envolver selector. Modifiquemos nuestro ejemplo para incluir esta nueva bandera. Aquí están los nuevos estilos:
@mixin button-style $ btn-bg-color: lightblue! global; color: $ btn-bg-color; botón @include button-style; .wrap fondo: $ btn-bg-color;
Como puede ver a continuación, gracias a este indicador, el CSS se compila sin ningún error:
botón color: azul claro; .wrap background: lightblue;
los global La bandera es útil, pero tenga en cuenta que no siempre es una buena práctica cambiar el alcance de una variable.
Sass proporciona dos funciones de introspección para probar si existe una variable o no. Podemos usar el variable-existe y / o variable-global-existe funciones para verificar si nuestras variables locales y / o globales existen respectivamente.
Por ejemplo, aquí hay un caso de uso común en el que definimos una variable que contiene la ruta absoluta a una fuente de Google. Luego, elegimos importar esa fuente en nuestras hojas de estilo, pero solo si la variable relevante ha sido instanciada.
$ google-font: "http://fonts.googleapis.com/css?family=Alegreya"; @if (global-variable-existencia (google-font)) @import url ($ google-font);
El resultado:
@import url ("http://fonts.googleapis.com/css?family=Alegreya");En este artículo, te presenté el concepto de alcance variable en Sass. Para aclarar las cosas, vimos diferentes ejemplos, así que espero que ahora tenga una buena comprensión de cómo funciona el alcance. Puede encontrar todos los ejemplos de este artículo en esta lista de SassMeister y siéntase libre de hacer cualquier pregunta que pueda tener en los comentarios!
