Variables en Sass | Explicado

Sintácticamente impresionante hojas de estilo (sass) preprocesos CSS y funciona bien con todas sus versiones. Mejora la capacidad del lenguaje básico al apoyar el uso de variables, anidación, mezclas, herencia, etc. Si hablamos de sus variables, esta es una excelente manera de evitar la escritura de los valores de CSS redundantes una y otra vez. Para obtener más información sobre las variables SASS, siga el artículo hasta el final.

Variables en sass

Las variables SASS se utilizan para almacenar información que luego se puede utilizar en cualquier parte de la hoja de estilo cuando sea necesario. El tipo de información que una variable SASS puede almacenar incluye colores, números, cadenas, listas, booleanos y nulos.

Sintaxis

$ VariAblename: VariableValue;

Para declarar una variable SASS, debe incluir un signo de dólar ($) seguido del nombre de la variable, el colon, el valor variable y un punto y coma de semicolon.

Ejemplo
Explore las variables SASS aún más con la ayuda de un ejemplo.

Html

Este es un párrafo.

Este es un Div

Este es nuestro archivo HTML en el que hemos creado dos elementos que son un párrafo y un contenedor DIV. Mientras tanto, el enlace del archivo CSS generado como resultado de la compilación del archivo SASS se ha proporcionado al atributo HREF de la etiqueta.

Hablar con descaro a

$ Fontfam: Verdana, Sans-Serif;
$ FontSize: 35px;
$ FontColor: Pink;
$ Border: 2px Solid Black;
$ Pading: 10px;
pag
Font-Family: $ Fontfam;
tamaño de fuente: $ FontSize;
Color: $ FontColor;

.envase
relleno: $ relleno;
Border: $ Border;

Este es nuestro archivo sass con .Extensión SCSS. Aquí hemos creado cinco variables SASS, a saber, $ Fontfam, $ FontSize, $ FontColor, $ Border y $ Padding. Una vez declarado que estamos usando estas variables en nuestro archivo para peinar nuestros elementos.

CSS

Este es nuestro archivo CSS resultante.

Producción

Los elementos se diseñaron con éxito utilizando variables SASS.

Sass Variables Alcance

Las variables en SASS se pueden declarar en cualquier parte del documento antes de que se usen y pueden tener un alcance global o un alcance local.

Una variable SASS con un alcance global se declara al comienzo del archivo y luego se usa en todo el documento donde sea necesario.

Mientras tanto, una variable SASS con un alcance local se declara dentro de un bloque y solo se puede usar dentro del alcance de ese bloque en particular.

Ejemplo
El ejemplo a continuación demuestra variables SASS de alcance global y local.

Hablar con descaro a

$ FontSize: 35px;
$ Pading: 10px;
pag
Font-Family: $ Fontfam;
tamaño de fuente: $ FontSize;
Color: $ FontColor;

.envase
$ Border: 2px Solid Black;
relleno: $ relleno;
Border: $ Border;
tamaño de fuente: $ FontSize;

Este es el mismo código que el anterior con la única diferencia de que $ FontSize, y $ Padding son variables globales y se pueden usar en cualquier lugar del archivo, mientras que $ Border es una variable local y solo se puede usar dentro del alcance del bloqueo. se declara en. Este código tendrá la misma salida que se demuestra en la sección anterior. Además, la salida CSS resultante también será la misma.

Conclusión

Las variables SASS se utilizan para almacenar información que luego se puede utilizar en cualquier parte de la hoja de estilo cuando sea necesario. Estas variables pueden almacenar colores, números, cadenas, listas, booleanos y nulos. El nombre de una variable SASS debe comenzar con un signo de dólar ($) y estas variables pueden tener un alcance global o un alcance local. Además, esta es una excelente manera de evitar escribir valores de CSS redundantes una y otra vez. El artículo analiza las variables SASS en detalle junto con ejemplos relevantes.