CSS: Variables

En CSS puede usarse variables para almacenar valores que luego se reutilizarán a lo largo de la hoja de estilos. Estas variables son conocidas como «propiedades personalizadas» (custom properties, en inglés), y se llaman así porque en realidad es como si estuviéramos creando propiedades a nuestro gusto.

Esta característica de CSS no estaba presente en los primeros niveles del lenguaje. Su ausencia fue el motivo de que apareciesen los preprocesadores CSS (como LESS, Sass o Stylus), que facilitan el mantenimiento del código. Cuanto más grande es el proyecto, más necesario puede ser el uso de variables.

Hay que aclarar que las variables CSS no funcionan de la misma manera que en un preprocesador CSS. En los preprocesadores, las variables no son leídas por el navegador, sino que se almacenan en un código previo a partir del cual se genera el CSS resultante. En cambio, las variables CSS sí que son leídas por los navegadores web, lo que añade el mecanismo de cascada.

El potencial de las variables es enorme. Con ellas es posible aplicar un mismo color en cientos o miles de propiedades sin tener que recordar el código hexadecimal. El hecho de que un valor esté indicado en un único lugar permite modificarlo una única vez sin tener que hacerlo de forma masiva en varias líneas.

Creación de variables CSS

Para trabajar con variables en CSS solo hay que declararlas, y luego accederemos a ellas. Se declaran con un prefijo formado por dos guiones (--), seguidos del nombre que queramos para nuestra variable, dos puntos (:), el valor que queramos guardar y se termina con un punto y coma (;).

Esta es la sintaxis:

--variable: valor;

Las variables se usan dentro de una regla CSS. Hay que tener en cuenta que el selector que usemos definirá el ámbito (scope) en el que podremos usar la variable. Por tanto, si queremos poder usarla en todo el documento, lo recomendable es usar el selector :root, que representa el elemento <html>.

Por ejemplo:

:root {
  --color-texto: blue;
}

No obstante, en ocasiones puede que nos interese limitar el ámbito a un selector más específico. En este caso, usaremos un selector que limite el ámbito de forma local, como puede ser un selector de clase. De esta manera:

.selector {
  --color-texto: blue;
}

Cuando se usa el selector :root, las variables CSS definidas en él serán de ámbito global, útil para acceder a ellas desde cualquier otro selector y en todo el documento. Las variables de ámbito local, en cambio, permitirán limitar el ámbito en casos puntuales, por lo que pueden ser igual de útiles.

Utilización de variables CSS

Para acceder a una variable se usa la función var() como valor de la propiedad CSS. Dentro del paréntesis de esta función se introducirá como parámetro el nombre completo de la variable, incluyendo el prefijo --.

Vamos a ver el ejemplo de un párrafo cuyo texto será de color rojo y usará la tipografía “Times”. Los estilos se definen mediante variables, y luego se accede a ellas desde otra regla CSS, con un selector de clase.

Código CSS:

:root {
  --color-texto: red;
  --tipo-texto: "Times";
}

.clase {
  color: var(--color-texto);
  font-family: var(--tipo-texto);
}

Texto modificado mediante variables CSS.

Valor alternativo (fallback)

La función var() permite indicar un segundo parámetro que será un valor alternativo (fallback) que se aplicará en caso de que no se pueda acceder a la variable indicada. Esto puede ayudar a prevenir errores. Este valor opcional se usará en caso de que la variable todavía no esté definida.

Volviendo al ejemplo anterior:

.clase {
  color: var(--color-texto, red);
}

En este ejemplo, si la variable --color-texto no está definida se usará el color rojo (red) como valor alternativo u opcional.

El valor opcional (fallback) podría ser otra variable CSS. Esto significa que, en este caso, se puede anidar una función var() dentro de la primera función var(). La variable anidada también podrá tener su valor opcional.

.clase {
  color: var(--color-texto, var(--otro-color, teal));
}

En este otro ejemplo, si la variable --color-texto no está definida se usará la variable --otro-color, y si esta variable tampoco está definida se usará el color turquesa (teal) como valor alternativo.

Herencia de variables CSS

Las variables CSS siguen el mecanismo de cascada que permite controlar el resultado final en el diseño web. Por tanto, heredan el valor de su elemento padre. La herencia se entiende mejor con un ejemplo.

Código HTML:

<div class="contenedor">
  <div class="primero">Primero</div>
  <div class="segundo">Segundo</div>
</div>

Código CSS:

.contenedor {
  --test: teal;
  color: var(--test);
}

.primero {
  --test: red;
  color: var(--test);
}

Resultado:

Primero
Segundo

Tal y como se puede apreciar en este ejemplo, el primer elemento hijo aparece en color rojo porque está definido específicamente así, mientras que el segundo hereda el color turquesa del elemento padre (contenedor).

Usar variables CSS en JavaScript (JS)

Otra de las grandes ventajas de las variables CSS es que se pueden usar en JavaScript (JS) como si fueran propiedades CSS estándar. Puede que el lector no esté familiarizado con la sintaxis de JavaScript, y no es necesario conocerlo en este punto. Simplemente, vamos a mostrar algunos de ejemplos de su uso.

Código JS para obtener el valor de una variable CSS:

// Primero se selecciona la clase deseada
const elemento = document.querySelector(".clase");

// Luego se obtiene el valor de la variable
elemento.style.getPropertyValue("--variable");

Código JS para crear o modificar una variable CSS:

// Primero se selecciona la clase deseada
const elemento = document.querySelector(".clase");

// Luego se crea o modifica la variable y su valor
elemento.style.setProperty("--variable", "azul");

Código JS para eliminar una variable CSS:

// Primero se selecciona la clase deseada
const elemento = document.querySelector(".clase");

// Luego se elimina la variable
elemento.removeProperty("--variable")

El uso de variables CSS en JavaScript (JS) solo va a funcionar en caso de que estén definidas en la hoja de estilos CSS, o que estén creadas mediante el método setProperty(). De lo contrario, no funcionarán.

La regla arroba ‘@property’

Con la regla arroba @property se puede ir un paso más allá y crear propiedades CSS personalizadas con una serie de parámetros específicos. Esta regla arroba permite indicarle al navegador el tipo de dato de la variable.

En esencia, es como si estuviéramos creando una propiedad CSS nueva e independiente, con su nombre, su sintaxis, indicaciones del control de la cascada y un valor predeterminado. La sintaxis es la siguiente. Código CSS:

@property --color-base {
  syntax: "<color>";
  inherits: false;
  initial-value: #ff7f2a;
}

Se puede ver que hay tres propiedades CSS que se utilizan para definir el funcionamiento de la propiedad personalizada que vamos a crear.

La propiedad syntax indica el tipo de dato que se espera. Puede ser uno de los valores que se muestra en la tabla siguiente:

Valor	Descripción
`<angle>`	Indica ángulos.
`<color>`	Indica colores.
`<custom-ident>`	Valores personalizados.
`<image>`	Indica valores de `url()` o degradados.
`<integer>`	Indica valores numéricos enteros.
`<length>`	Indica distancias.
`<length-percentage>`	Indica distancias en porcentajes.
`<number>`	Indica valores enteros o decimales.
`<percentage>`	Indica exclusivamente porcentajes.
`<resolution>`	Indica valores de resolución.
`<time>`	Indica valores de tiempo.
`<transform-function>`	Indica una función de transformación.
`<transform-list>`	Indica una lista de funciones de transformación.
`<url>`	Indica una URL con la función `url()`.

También se puede especificar que se admite una lista de datos. Por ejemplo, para indicar que los datos irán separados por un espacio, se añade el símbolo de sumar (+) como sufijo al tipo de dato, y para indicar que irán separados por una coma, el sufijo será el símbolo de la almohadilla (#). De esta manera:

"<color>+" (valores separados por espacio)
"<url>#" (valores separados por coma)

Para introducir dos tipos de datos diferentes se puede usar la barra vertical (|) como separador. Con esto se consigue indicar que se espera un valor u otro valor, ya que esta barra actúa como un operador lógico «OR». Este operador lógico se puede usar tantas veces como tipos de datos se necesite. Así:

"<color> | <integer>"