Introducción a las variables CSS

Las variables CSS sirven para definir variables dentro del lenguaje (si se le puede llamar así) CSS. Permite reutilizar esos valores y tener una única fuente de la verdad.

De este modo, si después queremos cambiar el estilo de todos los elementos que usen nuestras variables, lo podemos hacer en una sola línea.

Cabe mencionar que para que las variables CSS funcionen no necesitamos un preprocesador, lo podemos hacer con CSS puro.

Definir una variable CSS

Para definir una variable se usa la siguiente sintaxis:

selector {
--nombre-variable: definición;
}

Todas las variables comienzan su nombre con --. Su definición es lo mismo que se pondría en la definición del estilo del elemento, con los ejemplos se verá más claro.

En ese caso definimos la variable dentro de un elemento. Por ejemplo, si queremos definir una variable dentro de un encabezado:

h1 {
  --color-de-fondo: red;
}

Uso de las variables CSS

Para usar las variables CSS hay que invocar a var() así:

h1{
 --color-de-fondo: red;
 color: var(--color-de-fondo);
}

No te confundas, en la línea 2 definimos la variable, podemos definir varias variables. Después en la línea 3 la estamos usando.

Por cierto, var() acepta dos argumentos: el nombre de la variable y un valor por defecto. Ya que en ocasiones la variable puede estar mal definida, y si este es el caso, var intenta poner el estilo que se indica como segundo argumento.

Por ejemplo, si la variable --color-de-fondo no estuviera definida, se tomaría el color amarillo según la siguiente declaración:

h1{
 --color-de-fondo: red;
 color: var(--color-de-fondo, yellow);
}

Definir variables en :root

Si quieres definir las variables de manera global, utiliza el selector :root:

:root{
 --titulos: red;
 --subtitulos: yellow;
 --parrafos: blue;
 --borde: 2px solid red;
}

Ahora que las has definido puedes usarlas en cualquier lugar. Ahí puedes fijarte que no solo podemos definir colores, sino también otros estilos como bordes; de hecho se puede definir cualquier estilo CSS válido.

Compatibilidad con navegadores

Adivina con cuál navegador no es compatible… exacto, con internet explorer. Y bueno, supongo que también para otros como el navegador de la nintendo 3ds.

Si queremos que sea compatible, debemos definir el estilo dos veces. Así, si no entiende, no aplica el estilo. Por ejemplo:

h1{
 color: red;
 color: var(--titulos, green);
}

En este caso estamos definiendo el color dos veces, pero es porque si no se entiende el uso de var, se aplique el estilo de arriba.

Ejemplo completo

Ahora he creado un ejemplo completo para demostrar el uso de las variables CSS. El objetivo no es que se vea bien, solo es demostrativo.

:root{
 --titulos: red;
 --subtitulos: yellow;
 --parrafos: blue;
 --borde: 2px solid red;
}

h1{
 color: red;
 color: var(--titulos, green);
}

h2{
 color: green;
 color: var(--subtitulos, yellow);
}

p{
 border: var(--borde);
 color: green;
 color: var(--parrafos, yellow);
}

En un buen navegador, todo se ve como debería:

En cambio, en Internet Explorer se ve así:

No soporta la llamada a var, pero sí los otros estilos que mencionamos en la compatibilidad.

Por cierto, las variables también se pueden definir dentro de un media query. Simplemente hay que hacer algo así:

@media (max-width: 100px){
  :root {
    --variable: definición;
  }
}

Finalmente te invito a leer más sobre CSS en mi blog.