El poder de las variables CSS. ¿Sabías que de forma
nativa ya se pueden crear variables CSS? Si usabas
SCSS o similares principalmente por sus
variables tienes que saber que lo mismo ya no hace falta que sigas usándolo.
Para empezar voy a comentar el único malo que creo que tienen las variables CSS y es su sintaxis.
En SCSS es tan fácil como poner:
$color-main: #c6538c;
.container {
background: $color-main;
}
Pero con variables CSS la sintaxis es algo más larga. Además, las variables CSS solo se pueden definir dentro de selectores. Se suelen declarar en el selector :root para poder usarse de forma global.
:root {
–color-main: #d33a2c;
}
.container {
background: var(–color-main);
}
Pero es un precio a pagar porque las variables CSS tienen más ventajas que las de SCSS.
Para empezar, las variables de SCSS simplemente se inicializan en tiempo de compilación y luego ya no se pueden cambiar, al final es un preprocesador.
En cambio, las variables CSS pueden cambiar y redefinirse en tiempo real, por ejemplo puedes cambiarlas desde Javascript cuando quieras, esto con SCSS no se puede hacer.
Esto permite que puedas poner selectores en los que redefinas ciertas variables CSS . Una misma variable CSS puede tener a la vez distintos valores dependiendo del contexto.
Por ejemplo, imagina que quieres cambiar el color de un enlace al hacer hover y también para cierto tamaño de pantalla. Sin variables CSS si quieres hacer esto tienes que redefinir la propiedad color en cada bloque, en cambio, con variables CSS simplemente redefines la variable y listo. Si desde Javascript cambias el valor de esa variable, se actualizan todas las propiedades donde se usa en tiempo real.
Compartir
Facebook
Twitter
LinkedIn
Telegrama
Tumblr
WhatsApp
VK
Correo