Variables CSS: tutorial para usar las custom properties

Las CSS Custom Properties (más conocidas como variables CSS) son un gran avance para el desarrollo front-end. Traen la potencia de las variables a CSS, lo que se traduce en menos repeticiones, mejor legibilidad y más flexibilidad.

Además, a diferencia de las variables de los preprocesadores CSS, las variables CSS forman parte del DOM, y eso tiene muchas ventajas. En esencia son como las variables de SASS y LESS. En este tutorial voy a enseñarte con ejemplos cómo funciona este módulo de CSS3.

¿Por qué usar variables CSS?

Hay muchos motivos para usar variables en CSS. Uno de los más convincentes es que reducen las repeticiones en tu hoja de estilos.

El método de siempre

#title {
    color: #ff0000;
}

.h1 {
    color: #ff0000;
}

El método nuevo

:root {
    --red: #ff0000; /* Déclaration d'une variable css */
}
#title {
    color: var(--red); /* Utilisation de la variable css */
}

.h1 {
    color: var(--red); /* Utilisation de la variable css */
}

Esto no solo hace tu código más fácil de leer, sino que te da más margen de maniobra el día que quieras cambiar ese color.

Es cierto que esto ya se podía hacer con las variables de SASS y LESS desde hace años. Pero las variables CSS tienen algunas ventajas propias.

1. No necesitan compilarse para funcionar, porque son nativas del navegador. Así que no tienes que montar ninguna configuración para empezar, como sí ocurre con SASS y LESS
2. Viven en el DOM, lo que abre un montón de posibilidades que voy a repasar en este tutorial.

¡Vamos a por las variables CSS!

Declarar tu primera variable CSS

Para declarar una variable, lo primero es decidir en qué ámbito debe vivir. Si quieres que esté disponible de forma global, defínela en la pseudoclase :root. Esa pseudoclase apunta al elemento raíz de tu árbol de documento (normalmente la etiqueta <html>).

Como las variables se heredan, así estará disponible en toda tu aplicación, ya que todos tus elementos del DOM son descendientes de la etiqueta <html>.

:root {
    --main-color: #00FF00; /* Déclaration d'une variable css */
}

Como ves, una variable se declara igual que se define una propiedad CSS. La diferencia es que el nombre tiene que empezar por dos guiones.

Para acceder a una variable tienes que usar la función var() y pasarle el nombre de la variable como parámetro.

#title {
  color: var(--main-color);
}

Y eso le dará a tu título el color #00FF00.

Declarar una variable css local

También puedes crear variables locales, accesibles solo desde el elemento en el que se declaran y desde sus hijos. Resulta útil cuando sabes que una variable únicamente se va a usar en una o varias partes concretas de tu aplicación.

Por ejemplo, puedes tener una caja de alerta que usa un color especial que no aparece en ningún otro sitio de la aplicación. En ese caso tiene sentido declararla de forma local.

.alert {
  --alert-color: #ff0000;
}

Esta variable ya puede usarse desde sus hijos:

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

Si intentas usar la variable alert-color en otro punto de tu aplicación, por ejemplo en la barra de navegación, sencillamente no funcionará. El navegador ignorará esa línea de CSS.

Diseño responsive con variables CSS

Una gran ventaja de las variables CSS es que tienen acceso al DOM. No ocurre lo mismo con LESS o SASS, cuyas variables se compilan a CSS y solo después las lee el navegador

En la práctica, esto significa que puedes, por ejemplo, cambiar las variables según el ancho de la pantalla:

:root {
  --main-size: 16px ;
}
@media all and (max-width: 600px) {
  :root {
    --main-size : 12px ;
  }
}

Con estas cuatro líneas de código has actualizado el tamaño de fuente principal en toda tu aplicación cuando se muestra en pantallas pequeñas. Bastante elegante, ¿no?

Cómo acceder a las variables CSS desde JavaScript

Otra ventaja de vivir en el DOM es que puedes leer las variables desde JavaScript, e incluso actualizarlas, por ejemplo en función de las interacciones del usuario.

var root = document.querySelector(':root') ;
var rootStyles = getComputedStyle(root) ;
var mainColor = rootStyles.getPropertyValue('--main-color') ;
console.log(mainColor); // #00FF00

Para actualizar la variable CSS basta con llamar al método setProperty sobre el elemento en el que se declararon las variables CSS, pasándole el nombre de la variable como primer parámetro y el nuevo valor como segundo.

root.style.setProperty('--main-color','#0000ff')

Compatibilidad con los navegadores

Todos los navegadores actuales admiten las variables CSS, solo Internet Explorer, hoy abandonado, las ignora.

···