Variables CSS
CSS posee la capacidad de trabajar con variables, al igual que en otros lenguajes estos son espacios en memoria con una relación nombre/valor utilizados en este caso para almacenar estilos CSS, de ese mismo modo las variables pueden ser utilizadas las veces y la cantidad que haga falta.
Usar las variables para guardar los valores de una propiedad puede ahorrar mucho tiempo, por ejemplo: si se definen los colores de la página con variables, y llegado el momento se necesita cambiar estos colores bastará con modificar el valor de la variable en vez de buscar individualmente el color de cada elemento y modificarlo.
Las variables en este lenguaje se dividen en dos tipos:
Variables Globales
Son aquellas que pueden ser usadas por cualquier selector, es decir están disponibles para cualquier propiedad del documento CSS, la forma de declarar un dato como variable es simple:
-
Se inicia la declaración dentro de una clase ":root"
-
Se inicia la declaración con dos (2) guiones (--)
-
Se le da un nombre a la variable seguido de dos puntos (:)
-
Por último se le da un valor a la variable
Ejemplo
Con eso la variable ha sido declarada, para utilizarla en alguno de los selectores simplemente se ingresa la propiedad que utilizará la variable y en su respectivo valor se ingresa la propiedad var(), con el nombre de la variable a utilizar en el interior de los paréntesis, como se puede ver en este ejemplo
Ejemplo
Variables locales
Se tratan de aquellas variables que únicamente están disponibles dentro de una clase o de un elemento, para declarar una variable como local se repiten los pasos anteriores, con la diferencia de que esta no se declara en la clase :root, en su vez se puede declarar dentro de cualquier selector que se desee, en su consecuencia la variable solo está disponible para los elementos relacionados con esta.
Ejemplo
En este caso la variable únicamente está disponible para las etiquetas p, a su vez si se da el caso de que la variable sea declarada para un elemento contenedor todos sus elementos hijos podrán hacer uso de esta, es decir si se declara en el contenedor, los elementos de su interior podrán hacer uso de esta variable.
Ejemplo
A su vez las variables pueden ser re-definidas, para esto simplemente hay que volver a declarar la variable global dentro de un elemento o una clase con otro valor de esta forma:
Así el valor de la variable se sobre-escribirá para esta clase o elemento, mientras que para lo demás esta seguirá teniendo el mismo valor.
Nota: las variables se pueden sobre-escribir sin importar la jerarquía de los estilos, aún si se usa el "!important"