Variables CSS: Qué son y cómo se utilizan

En este tutorial vamos a ver en qué consisten las variables CSS; un nuevo método que te ayuda a mejorar tus hojas de estilo en navegadores modernos, usando funcionalidades antes restringidas a los preprocesadores CSS.

Introducción

Los preprocesadores CSS han gozado de gran popularidad durante los última década, siendo muy común el uso de Less o SASS, herramientas que todavía son muy utilizadas. Estas tecnologías aportan las siguientes ventajas:

• Permiten anidar selectores CSS.
• Permiten importar otros archivos.
• Permiten declarar variables.

Sin embargo, ahora CSS también incluye una funcionalidad que permite declarar propiedades CSS personalizadas, que también reciben el nombre de variables CSS.

CSS no es un lenguaje de programación como podría ser JavaScript, PHP, Python o C++, lenguajes en los que las variables son un pilar fundamental. CSS se utiliza para maquetar y dar estilos al código HTML, por lo que su sintaxis es puramente declarativa, con el único objetivo de decirle a los navegadores cómo deben mostrar el código HTML. Es por ello que las variables de CSS tienen una utilidad más limitada que en estos lenguajes.

Las variables CSS ayudan a evitar la repetición de ciertos elementos y a eliminar inconsistencias en las hojas de estilos CSS, centralizando la definición de los valores contenidos en las variables. Además, las variables de CSS tienen una ventaja adicional frente a las variables que puedes declarar con los preprocesadores CSS; y es que podrás acceder a las mismas y cambiar su valor directamente mediante JavaScript.

Cómo declarar variables CSS

Para declarar una variable CSS tendrás que utilizar dos guiones -- seguidos del nombre de la variable, tras el cual irán dos puntos : y el valor de la variable:

--nombre-variable: valor;

En el siguiente ejemplo asignamos el valor blue a la variable --color-primario, pudiendo usar esta variable en todos los descendientes de la etiqueta body, tal y como veremos a continuación:

body {
  --color-primario: blue;
}

El valor de las variables CSS podrá ser cualquier valor válido CSS, dependiendo del tipo de propiedad para la que quieras usar la variable.

Cómo usar variables CSS

Para usar una variable CSS tendrás que usar el método var(--nombre-variable).

En el siguiente ejemplo vamos a usar la variable --color-primario que hemos declarado en el apartado anterior:

p {
  color: var(--color-primario);
}

También puedes declarar un valor por defecto para la variable, usado cuando la variable no tenga un valor definido:

p {
  color: var(--color-primario, grey);
}

Si asignas el valor de una variable a una propiedad que no acepta dicho valor, la propiedad será considerada inválida, por lo que no tendrá ningún efecto. Por ejemplo, no deberías aplicar un color o un valor rem a una propiedad float o text-align.

Tipos de variables CSS

Existen dos tipos de variables dependiendo del lugar en el que las declares. Se trata de las variables globales y las locales.

Variables globales

Puedes agregar las variables globalmente, en cuyo caso deberán estar declaras en el interior del elemento :root:

:root {
  --color-texto: black;
  --color-primario: blue;
  --color-secundario: red;
  --padding-defecto: 20px 30px;
  --fondo-defecto: #fff;
}

El elemento :root es una pseudo clase CSS que apunta el elemento raíz del código HTML. En el contexto de un documento HTML, :root apuntará a la etiqueta html, que se corresponde con la etiqueta raíz del documento. Sin embargo, has de saber que :root es un selector más específico que el selector html, por lo que tiene más prioridad.

Del mismo modo, en el contexto de un archivo SVG, que usa sintaxis XML, el selector :root apuntará a la etiqueta svg, que se corresponde con su etiqueta raíz.

Una vez hayas declarado una variable global en la clase :root, estará disponible para todos los elementos de la página, por lo que podrás utilizarla en cualquier parte del código CSS usando el método var():

p {
  color: var(--color-primario)
}

Las variables CSS son sensibles a las mayúsculas, por lo que la variable --height no será la misma que la variable --Height:

--height: 300px;
--Height: 300px;

Variables locales

También puedes declarar las variables localmente a algún tipo de elemento, clase o elemento en particular. Para ello deberás declararlas en el interior de los elementos, tipos de elemento o clases correspondientes, de modo que las variables estén disponibles únicamente para los descendientes de estos elementos o clases.

Si agregas una variable a la clase .menu-link, solamente estará disponible para los hijos de la clase .menu-link:

.menu-link {
  --color-secundario: yellow;
}

Lara variable --color-secundario del ejemplo anterior no funcionará en elementos que no desciendan de la clase .menu-link.

Las variables CSS pueden ser reasignadas:

body {
  --color-fondo: white;
  --color-texto: black;
}

.resaltado {
  --color-fondo: black;
  --color-texto: white;
}

Fuera de la clase .resaltado, la variable --color-texto tendrá el valor black.

La única diferencia entre estas variables es su ámbito. Si un elemento se ve afectado por dos variables CSS con el mismo nombre, siempre usará el valor de la variable CSS más cercana. Este es el motivo de que en la clase .resaltado, la variable --color-texto declarada en la clase .resaltado tendrá prioridad sobre la variable --color-texto declarada para el etiqueta body.

Del mismo modo, cuanto más específico sea el selector CSS en el que se declaran las variables, mayor prioridad tendrán sobre las otras variables declaradas con el mismo nombre en selectores menos específicos.

También puedes sobrescribir el valor de una variable CSS utilizando estilos CSS en línea en tu código HTML:

<article style="--color-texto: purple;">
  ...
</article>

Variables CSS y JavaScript

Una de las mayores ventajas de las variables CSS es que podrás acceder a ellas y modificar su valor mediante JavaScript. También podrás declarar nuevas variables CSS. Primero tendrás que seleccionar la clase CSS o elemento en el que esté declarada la variable y, seguidamente, podrás crear nuevas variables o cambiar el valor de las existentes.

const elemento = document.getElementById('mi-elemento');
elemento.style.setProperty('--nombre-variable', 'valor');

Obtén el valor de una variable global

Para obtener el valor de una variable global declarada en la pseudo clase :root, primero tendrás que obtener los estilos declarados en el documento:

const estilos = getComputedStyle(document.documentElement);

Seguidamente, podrás obtener el valor de la propiedad deseada:

const prop = estilos.getPropertyValue('--nombre-variable');

Y finalmente podrás obtener el valor:

const valor = String(prop).trim();

Obtén el estilo aplicado a un elemento

Podría darse el caso de que una variable esté definida varias veces con el mismo nombre. Para obtener el valor final de la variable aplicado a un elemento específico mediante JavaScript, primero debes seleccionar el elemento:

const elemento = document.getElementById('mi-element');

Seguidamente tendrás que obtener los estilos aplicados al elemento:

const estilos = getComputedStyle(elemento);

Luego ya podrás obtener el valor de la propiedad deseada:

const prop = estilos.getPropertyValue('--nombre-variable');

Y finalmente podrás obtener el valor:

const valor = String(prop).trim();

Media queries con variables CSS

Podrás usar las variables CSS en el interior de las media queries, muy habituales cuando creas una página responsive:

body {
  --column-padding: 40px;
}

@media screen and (min-width: 640px) {
  --column-padding: 80px;
}

.container {
  width: var(--column-padding);
}

Matemáticas con variables CSS

Las variables CSS también permiten asignar valores dinámicos mediante operaciones básicas. Para ello debes usar la función calc():

:root {
  --column-1-6: calc(100% / 6);
}

Soporte de las variables CSS

Las variables CSS son ampliamente soportadas por todos los navegadores modernos. Puedes utilizarlas siempre y cuando no necesites que tu aplicación sea compatible con versiones antiguas de los navegadores actuales o con Internet Explorer. A día de hoy, Internet Explorer es ya un navegador muy minoritario.

Si necesitas dar soporte a Internet Explorer o a navegadores desactualizados, siempre puedes utilizar librerías como PostCSS o Myth, aunque perderás la habilidad de interactuar con las variables CSS mediante JavaScript y mediante las herramientas para desarrolladores que incluyen los navegadores, ya que los valores de las variables serán asignados como valores CSS normales, perdiendo su condición de variables.

---