Variables en CSS

Ya se pueden crear variables CSS de forma nativa. Si usabas SCSS o similares principalmente por sus variables ya no hace falta que sigas usándolo.

Lo único malo que que tienen las variables CSS es su sintaxis, verás, me explico.

En SCSS es tan fácil como poner:

    $primaryColor: #c6538c; 

    .primaryButton { background: $primaryColor; }
  

Las variables CSS solo se pueden definir dentro de selectores. Se suelen declarar en el selector :root para poder usarse de forma global.

  :root {
    --primaryColor: #d33a2c;
  } 
  .primaryButton { 
    background: var(--primaryColor); 
  }

A partir de aquí, todos los puntos a favor de las variables CSS

• Las variables de SCSS simplemente se inicializan en tiempo de compilación y luego ya no se pueden cambiar, recuerda que 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.

  Un uso típico de este concepto que se suele usar mucho es para crear un tema oscuro. La idea es definir una serie de variables globales para toda la web. Cuando el usuario activa el tema oscuro, se añade una clase al body de la página. Con un selector CSS pillas el body con la clase del tema oscuro y redefines todas las variables de los colores, gracias a la cascada todas las variables se actualizarán.

• Las variables CSS pueden actualizar su valor o definirse dentro de las propias etiquetas HTML. Simplemente tienes que poner el atributo style y dentro añadir las variables como un estilo más en línea.

• Las variables CSS, al crearse dentro de los selectores, pueden definirse de forma local a ese selector. Esa variable no podrá usarse en otros elementos de la página, solo en los que cuelguen de ese elemento.

• Pero lo mejor de todo sin duda, es que son nativas, no necesitas instalar preprocesadores, no necesitas compilar....

Hasta luego 🖖