Las Variables Css nos permiten tener un flujo de trabajo mas que interesante, al poder modificar los valores del contenedor como tal y que ese valor se asigne a todos las reglas en las que se realice el llamado de las Variables Css.

Lo primero que debe hacerse es declarar las variables css, usando como selector el root o en su defecto el body

:root {
  --nombreDeLaVariable: #333333;
}

Con esta declaración ya podríamos usar la variable en alguna de nuestras reglas y si fuera el caso de realizar un cambio, solo con cambiar el valor original de la variable esta se verá cambiado en todo el css.

Para utilizar o llamar la variable simplemente invocamos la función var() pasando el nombre de la variable como parámetro de la misma.

.tituloSeccion{
    color:var(--nombreDeLaVariable);
}

 

De esa manera el usar las variables css nos facilita la realización de nuestros proyectos.