Variables CSS - lo básico

facebook-svg gplus-svg twitter-svg

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