Uso de Variables de Sass para Estilos Reutilizables
La primera característica útil es la existencia de variables. Podemos almacenar y reutilizar valores a lo largo del código. Es muy similar a los lenguajes de programación que permiten crear una variable una vez y utilizarla varias veces. Para declarar una variable, es necesario anteponer un signo de dólar ($) al nombre de la variable, luego colocar dos puntos (:) y asignar un valor.
$textPrimaryColor: #49423c;
Nota
Se puede utilizar cualquier notación de nombres, ya sea kebab case (
text-primary-color), snake case (text_primary_color) o camel case (textPrimaryColor). Lo esencial es mantener la misma notación de nombres en todo el proyecto.
Imaginemos que necesitamos crear un marcado en el que todo el texto tenga el color #474943 y su tamaño de fuente sea 24px. El archivo sass se vería de la siguiente manera:
$textColor: #474943;
$textFontSize: 24px;
p {
color: $textColor;
font-size: $textFontSize;
}
Siempre mantenemos las variables lo más descriptivas posible, para asegurar a qué corresponde cada variable.
El beneficio es que facilita realizar cambios de diseño en el proyecto posteriormente. Si el tamaño de fuente o el color del texto cambian, se puede actualizar el valor de las variables $textColor y $textFontSize, y el proyecto se modificará en consecuencia.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain more about how variables work in Sass?
What are some best practices for naming variables in Sass?
Can I use variables for other CSS properties besides color and font size?
Awesome!
Completion rate improved to 2.04Uso de Variables de Sass para Estilos Reutilizables
Desliza para mostrar el menú
La primera característica útil es la existencia de variables. Podemos almacenar y reutilizar valores a lo largo del código. Es muy similar a los lenguajes de programación que permiten crear una variable una vez y utilizarla varias veces. Para declarar una variable, es necesario anteponer un signo de dólar ($) al nombre de la variable, luego colocar dos puntos (:) y asignar un valor.
$textPrimaryColor: #49423c;
Nota
Se puede utilizar cualquier notación de nombres, ya sea kebab case (
text-primary-color), snake case (text_primary_color) o camel case (textPrimaryColor). Lo esencial es mantener la misma notación de nombres en todo el proyecto.
Imaginemos que necesitamos crear un marcado en el que todo el texto tenga el color #474943 y su tamaño de fuente sea 24px. El archivo sass se vería de la siguiente manera:
$textColor: #474943;
$textFontSize: 24px;
p {
color: $textColor;
font-size: $textFontSize;
}
Siempre mantenemos las variables lo más descriptivas posible, para asegurar a qué corresponde cada variable.
El beneficio es que facilita realizar cambios de diseño en el proyecto posteriormente. Si el tamaño de fuente o el color del texto cambian, se puede actualizar el valor de las variables $textColor y $textFontSize, y el proyecto se modificará en consecuencia.
¡Gracias por tus comentarios!
