Las variables han sido añadidas hace poco tiempo, son un herramienta que nos permite almacenar información sobre los diferentes atributos que le hemos añadido a nuestra página, podemos guardar la fuente de la página que estamos utilizando, el color de una zona específica, el tamaño de la fuente, o básicamente, guardar el valor que queramos.
Gracias a esta página: caniuse.com podemos ver la compatibilidad que tienen los navegadores con esta nueva herramienta, cuanto mayor es el número mejor se comportará esta función en el navegador.
En este ejemplo imaginemos que los rectángulos morados son botones con accesos directos a otros apartados de la página, si finalmente no nos gusta ese color lo único que debemos hacer será cambiar directamente la variable que le tenemos asignada al color principal de los botones, sería de esta manera:
Primero tenemos que agregar a nuestro hoja de CSS un elemento llamado root donde escribiremos la variable que queramos darle y eliminar el color que le hemos asignado al background-color, de esta manera, podremos cambiar el color de todos los botones sin necesidad de tener que aprendernos el color específico que le damos a nuestra página o cambiarlos uno a uno.
Después de agregar los cambios y actualizar la página, los botones habrán cambiado su color gracias a las variables de CSS.
