variable-cabecera

VARIABLES CSS

Las variables de CSS no son una idea recientemente surgida en los preprocesadores CSS sino que se nos presentan en realidad como una potente característica CSS nativa todavía más potente y extentas de los inconvenientes de la variable de preprocesador.

A diferencia de la variable de preprocesador, las variables CSS no existen en tiempo de ejecución lo que nos permite editar sus valores desde el navegador sin necesidad de volver a compilar el código necesariamente para ver los resultados.

Todo lo que necesitas saber acerca de las variables CSS es esto:

:root {
  --var-name: value;
}

var-name es el nombre de la propiedad CSS “definida arbitrariamente” (precedida necesariamente por los dos guiones –) y value es, en una sorprendente revelación, el valor de la propiedad.

Ahora, para poder utilizar esta propiedad a lo largo de nuestra hoja de estilos tan solo debemos escribir la función var() para avisar al navegador de que estás apunto de utilizar una variable CSS personalizada.

Por lo tanto, el siguiente código:


:root {
  --main-margin: 10px;
  --color-base: #BADA55;
}

.box {font-size: 19px;
  background-color: var(--color-base);
  margin-top: var(--main-margin);
}

Sería similar a este:

.box {
  color: white;
  background-color: #BADA55;
  margin-top: 10px;
}

Las variables CSS son algunas de esas funciones CSS misteriosamente infrautilizadas pero útiles, potentes y (sorprendentemente) bien soportadas por los navegadores.
¡No quedan demasiadas excusas para no empezar a utilizarlas!

Extra: Lea Verou – CSS Variables