Accede a todo EDteam con un único pago¡Sube a premium con -50%!

Las variables CSS son una realidad y te explico como usarlas

Las variables CSS ya son compatibles con todos los navegadores así que puedes empezar a usarlas hoy mismo en tus proyectos. En este artículo te explico como.

Diseño web
3 minutos
Hace 6 años
Las variables CSS son una realidad y te explico como usarlas

¡CSS por fin tiene variables! En realidad las tiene desde hace un par de años, pero como siempre el soporte nos limitaba a usarlas en proyectos reales. Pues bien, en 2018 el soporte es total (solo IE no lo soporta, pero Edge sí) y ya no tenemos excusas.

El uso de variables CSS es muy sencillo:

1/* Las variables deben declararse dentro de un selector 2 Se acostumbra usar :root para que la variable sea global 3 Se declaran con dos guiones y el nombre 4 Para utilizarlas se usa la funcion var() y entre 5 los paréntesis se escribe el nombre de la variable 6 7*/ 8 9:root { 10 --my-color: red 11} 12 13body { 14 color: var(--my-color) 15} 16

El nombre exacto es Custom properties aunque no está mal decirles variables (hasta la W3C las llama variables). Pero ¿por qué se llaman custom properties y no variables? Son dos las razones:

  • El valor es heredado a los hijos
  • El valor puede redefinirse por cascada

Estos dos conceptos (cascada y herencia) son muy propios de las propiedades CSS y no tienen relación con el comportamiento de una variable en ningún lenguaje de programación.

Veamos el caso de la herencia con el ejemplo anterior

1:root { 2 --my-color: red 3} 4 5body { 6 color: var(--my-color) 7} 8 9/* En este caso todos los textos (párrafos, títulos, etc.) 10 serán de color rojo por herencia, porque descienden de 11 body al resto de elementos (comportamiento propio de CSS) 12*/ 13

Ahora el caso de la cascada con el mismo ejemplo

1:root { 2 color: red 3} 4 5body { 6 color: var(--color) 7} 8 9h1 { 10 --color: blue; 11} 12 13/* En este caso todos los textos (párrafos, títulos, etc.) 14 serán de color rojo por herencia, pero todos los h1 serán 15 azules porque hemos usado la cascada para redefinir el valor 16 de la propiedad personalizada --color 17*/ 18

Scope de las variables CSS

El scope de una variable es el contexto en el cual existe y puede ser invocada. Por ejemplo, la mayoría de lenguajes de programación tienen scope de bloque (conjunto de expresiones encerradas entre llaves). Ejemplo:

1{ 2 let miVariable = 'Hola mundo' 3 console.log(miVariable) // 'Hola mundo' 4} 5 6console.log(miVariable) // Error, miVariable no está definida 7

Las variables CSS, en cambio, no tienen scope de bloque sino que, por la herencia, son utilizables en cualquier hijo o descendiente (en el DOM) del elemento en el que fueron declaradas. Es por eso que si queremos que una variable sea global (que sea accesible desde cualquier lugar del proyecto) la declaramos en la pseudoclase :root que apunta al elemento más alto del DOM <html></html> pero tiene más especificidad que el selector de etiqueta.

Esto significa que las variables CSS existen en el DOM por lo cual pueden ser leidas y manipuladas con JavaScript con los métodos getComputedStyle(element) y element.style.setProperty() además que son accesibles desde las dev tools del navegador lo que les da un poder enorme en el diseño web.

Imagen de variables css en las dev tools del navegador

Domina las variables CSS como un experto

He creado un curso para que domines las variables CSS y las uses hoy mismo en tus proyectos. Te enseñaré:

  • Declarar y utilizar variables CSS
  • En qué casos son válidas y en qué casos no
  • Aprovechar la cascada y la herencia de las variables CSS
  • Variables CSS vs variables Sass (en qué caso usar cada una)
  • Responsive web design con variables CSS
  • Manipular variables CSS con JavaScript (ejercicio indicador de scroll y ejercicio selector de color RGB)
  • Crear tema claro y oscuro para un mismo sitio y cambiar de tema con un botón.

Enlace: Curso Variables CSS

¡Nos vemos en clase!

Comentarios de los usuarios

Pregunta a ChatEDT