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 Last Call de Working Draft, esta implementación promete elevar el potencial de las características que incluye CSS en la actualidad.
Entre las opciones que se están incorporando encontramos la nueva propiedad personalizada (Custom Propertie): --* 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;
--accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
color: var(--main-color);
}Por el momento es una especificación en desarrollo y solo algunas versiones de los navegadores han comenzado a implementar esta característica de manera experimental, como es el caso de Google Chrome, Mozilla Firefox, Safari yMicrosoft Edge en sus versiones más modernas.
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.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Hola, ¿qué navegadores soportan ya el uso de variables en CSS?
Por ahora hay bajo soporte. Recién algunas versiones de Firefox modernas y se espera que Chrome sume pronto el soporte. Más datos sobre el tema en: http://caniuse.com/#feat=css-variables
Saludos
Damián