¡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:
/* Las variables deben declararse dentro de un selector
Se acostumbra usar :root para que la variable sea global
Se declaran con dos guiones y el nombre
Para utilizarlas se usa la funcion var() y entre
los paréntesis se escribe el nombre de la variable
*/
:root {
--my-color: red
}
body {
color: var(--my-color)
}
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
:root {
--my-color: red
}
body {
color: var(--my-color)
}
/* En este caso todos los textos (párrafos, títulos, etc.)
serán de color rojo por herencia, porque descienden de
body al resto de elementos (comportamiento propio de CSS)
*/
Ahora el caso de la cascada con el mismo ejemplo
:root {
color: red
}
body {
color: var(--color)
}
h1 {
--color: blue;
}
/* En este caso todos los textos (párrafos, títulos, etc.)
serán de color rojo por herencia, pero todos los h1 serán
azules porque hemos usado la cascada para redefinir el valor
de la propiedad personalizada --color
*/
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:
{
let miVariable = 'Hola mundo'
console.log(miVariable) // 'Hola mundo'
}
console.log(miVariable) // Error, miVariable no está definida
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.
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!