Variables CSS - lo básico
Las variables CSS, llamadas de hecho custom properties ( propiedades a medida ) están actualmente soportadas en todos los principales navegadores salvo IE ( ya fallecido ) y Edge ( donde ya están trabajando en ello ).
O sea: las variables CSS ya están a la vuelta de la esquina.
Como declarar una variable en CSS
Para declarar una variable CSS utilizamos esta sintaxis:
elemento{ --variable: valor; }por ejemplo:
elemento{ --color: #abcdef; }Los dos guiones ( -- ) que aparecen delante dicen al CSS que esta propiedad es una variable, y Lea Verou sugiere que podemos pensar en ello como una propiedad CSS con un prefijo vacío ( -webkit-propiedad, -moz-propiedad, --propiedad ).
Como utilizar las variables CSS
Usamos las variables CSS como valor de una propiedad CSS.
Para utilizar una variable CSS ya definida empleamos la función var() y esta sintaxis:
elemento{ propiedad: var(--variable);}por ejemplo:
elemento{ color: var(--color);}See the Pen CSS var: basic* by Gabi (@enxaneta) on CodePen.
Cosas que saber acerca de las variables CSS
1. Las variables CSS se comportan como las demás propiedades CSS: son heredadas, y pueden ser declaradas inline.
See the Pen CSS var: inline + JS* by Gabi (@enxaneta) on CodePen.
2. A diferencia de la demás propiedades CSS que no distinguen entre mayúsculas y minúsculas, las variables CSS son case sensitive. O sea --color y --Color son dos variables distintas.
3. La función var() acepta un segundo argumento: un valor alternativo ( fallback ) en el caso en cual la variable proporcionada no existe.
background-color: var(--bg, orange);Esto quiere decir que background-color es orange en el caso en cual --bg no está declarada.
4. En el caso en que la variable --bg está declarada pero tiene un valor invalido, por ejemplo --bg:#error, la propiedad ( background-color ) toma el valor por defecto: transparent en este caso.
5. Las variables CSS son como las matrioskas: Sabemos que la función var() acepta un segundo argumento: un valor alternativo ( fallback ) en el caso en cual la variable proporcionada no existe. Este segundo argumento puede ser otra variable, Y de nuevo si esta variable no existe . . .
.matrioska{
background-color: var(--rojo, var(--bermejo, var(--colorao, red)));
} See the Pen CSS var: fallback* by Gabi (@enxaneta) on CodePen.
Como declarar una variable CSS en JavaScript
Podemos recuperar el valor de una variable CSS utilizando el método getPropertyValue.
Si hemos declarado el valor de la variable inline podemos escribir:
elemento.style.getPropertyValue("--bg");Para las variables declaradas en el CSS tenemos que escribir:
window.getComputedStyle(elemento).getPropertyValue("--color");Para declarar una nueva variable CSS o para restablecer el valor de una variable CSS ya declarada utilizamos el método setProperty de esta manera:
elemento.style.setProperty("--foo", "test");Vealo en codepen.io