Cómo en cualquier lenguaje de programación las variables son un elemento esencial y el CSS no se podía quedar atrás, para la versión 3 de CSS que ya algunos navegadores soportan algunas características cómo Safari se va a incluir el soporte para variables, me encontré en el blog de Dave Woods con un ejemplo de variables en un CSS, la sintaxis es la siguiente:
@variables { keyColor: #f00; }
Y enseguida puedes llamar a la variable en cualquier lugar del documento donde la necesites usando la siguiente sintaxis:
h1 { color: var(keyColor); }
Ahora veamos un método para declarar varias variables, la forma de llamarlas es la misma:
@variables { firstcolor: #f00; secondcolor: #300; thirdcolor: #300; }
Esto puede ser muy útil para definir esquemas de color dinámicamente y solamente llamarlos después en un CSS estático.