El W3C cuenta con el documento CSS Custom Properties for Cascading Variables Module Level 1, que introduce a las hojas de estilo en cascada la posibilidad e incorporar variables.

Actualmente en W3C Candidate Recommendation, esta implementación promete elevar el potencial de las características que incluye CSS en la actualidad.

A continuación veremos un ejemplo de uso de las variables en CSS y las consideraciones que debemos tener en cuenta a la hora de utilizar esta característica.

Ejemplos de uso de las variables en CSS

Entre las opciones que se están incorporando encontramos la nueva propiedad personalizada (Custom Properties): --* y la función var().

Para comprender mejor su utilización, el W3C nos provee el siguiente ejemplo en su documento http://www.w3.org/TR/css-variables-1/:

:root {
  --main-color: #06c;
  --link-color: #006;
}

#caja h1 {
  color: var(--main-color);
}

En este caso se aplicará lo definido en --main-color como color de todos los h1 contenidos en el elemento cuya id es caja. Vale decir que el valor se calcula en cada ubicación que sea necesaria para ser aplicado.

Consideraciones finales

La incorporación de las variables en CSS es una característica que potencia el crecimiento de este lenguaje de estilos. Pero por el momento hay que tener precaución si decimos usarlas y planificar opciones de compatibilidad. Aún hoy existen consideraciones de compatibilidad para el uso de esta característica directamente desde CSS, ya que no todas las versiones de los navegadores ofrece una compatibilidad total.

En este sentido es importante señalar los preprocesadores LESS y SASS cuentan con esta característica desde hace años. Y como el código de estos lenguajes se procesa para luego devolvernos un CSS que puedan interpretar los navegadores, se puede lograr mayor compatibilidad hoy en día.

Es importante señalar que muchos frameworks y librerías emplean SASS para manejar de manera más eficiente los estilos. Un caso muy conocido es el de Bootstrap.

Podemos conocer más sobre el uso de variables en la documentación y ejemplos que ofrece MDN.

Si te interesa saber más sobre CSS, LESS, SASS o Bootstrap dejame un comentario o escribeme un mensaje.