Variables en CSS

w3cEl 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


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web y Mobile. 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 y herramientas para Desarrollo Web y móvil en modalidad online y presencial.

2 Comentarios en “Variables en CSS
  1. Facundo dice:

    Hola, ¿qué navegadores soportan ya el uso de variables en CSS?

1 Pings/Trackbacks para "Variables en CSS"
  1. […] Variables en CSS – 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. […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*



Encontrame en las redes sociales. Contactame.