Variables de Sass
La primera característica útil es la existencia de variables. Podemos almacenar y reutilizar valores a través del código. Es tan similar al lenguaje de programación que permite crear una variable una vez y utilizarla varias veces. Para declarar una variable, tenemos que poner un signo de dólar ($) y un nombre de variable, y luego ponemos dos puntos (:) y damos un valor.
Nota
Podemos utilizar cualquier notación de nomenclatura, ya sea kebab case (
text-primary-color) o snake case (text_primary_color), o camel case (textPrimaryColor). Lo esencial es utilizar la misma nomenclatura en todo el proyecto.
Imaginemos que necesitamos crear un markup en el que todo el texto tenga el color #474943 y su tamaño de fuente sea 24px. El archivo sass tendría el siguiente aspecto
Siempre mantenemos las variables lo más descriptivas posible, para poder asegurar de qué es responsable cada variable.
El beneficio es que hace que sea fácil hacer cambios de diseño en el proyecto más tarde. Si el tamaño o color de la fuente del texto cambia, podemos actualizar el valor de las variables $textColor y $textFontSize, y el proyecto se editará también.
¿Todo estuvo claro?
Contenido del Curso
Advanced CSS Techniques
2. Posicionamiento de Artículo
6. Sitios web y aplicaciones adaptables/responsivos
Advanced CSS Techniques
Variables de Sass
La primera característica útil es la existencia de variables. Podemos almacenar y reutilizar valores a través del código. Es tan similar al lenguaje de programación que permite crear una variable una vez y utilizarla varias veces. Para declarar una variable, tenemos que poner un signo de dólar ($) y un nombre de variable, y luego ponemos dos puntos (:) y damos un valor.
Nota
Podemos utilizar cualquier notación de nomenclatura, ya sea kebab case (
text-primary-color) o snake case (text_primary_color), o camel case (textPrimaryColor). Lo esencial es utilizar la misma nomenclatura en todo el proyecto.
Imaginemos que necesitamos crear un markup en el que todo el texto tenga el color #474943 y su tamaño de fuente sea 24px. El archivo sass tendría el siguiente aspecto
Siempre mantenemos las variables lo más descriptivas posible, para poder asegurar de qué es responsable cada variable.
El beneficio es que hace que sea fácil hacer cambios de diseño en el proyecto más tarde. Si el tamaño o color de la fuente del texto cambia, podemos actualizar el valor de las variables $textColor y $textFontSize, y el proyecto se editará también.
¿Todo estuvo claro?
