Una de las características más envidiadas de los preprocesadores CSS es la posibilidad de almacenar en variables los valores que pueden ser susceptibles al cambio: tamaños, colores, nombres de las fuentes, etcétera.
Si bien su llegada está siendo lenta, ya empieza a aparecer en algunos navegadores como Chrome 30+ y Firefox Nightly (versión 29).
El mecanismo es básicamente el mismo que en cualquier preprocesador, aunque para mi gusto algo más tedioso para aquellos que ya estamos acostumbrados a trabajar con ellas en cualquier otro lenguaje:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
:root {
var-fontSize: 14pt;
var-backgroundColor: #00bfff;
var-span-color: #eee8aa;
var-fontColor: #ffffff;
}
article {
font-size: var(fontSize);
background-color: var(backgroundColor);
color: var(fontColor);
}
span {
background-color: var(span-color);
}
</style>
</head>
<body>
<article>
<span>Hello world!</span>
</article>
</body>
</html>
Para declarar una variable CSS, la misma debe tener el prefijo var- seguido del nombre que queramos darle. En este ejemplo he incluido todas las variables dentro de :root, pseudo-clase que representa todo el documento. Las mismas no pueden estar definidas directamente en la hoja de estilo, como ocurre con los preprocesadores, por lo que es necesario añadirlas dentro de una clase.
Una vez declaradas, podremos hacer uso de ellas en diferentes clases de nuestra hoja de estilos, siempre y cuando estén definidas antes de su uso.
Por otro lado, es necesario invocar a la función var(), pasando como parámetro el nombre de la variable sin el prefijo, para que la misma sea reconocida correctamente.
Como ya comentaba al inicio de este post, su aceptación por los navegadores más populares está siendo lenta pero podemos comprobar el resultado en Chrome 30+ habilitando el flag Enable experimental Web Platform features: chrome://flags/#enable-experimental-web-platform-features
En el caso de Firefox, el 14 de Diciembre se publicó en Mozilla Hacks que las variables CSS ya estaban disponibles en la versión nocturna del navegador.
¡Saludos!