Las Variables en CSS

Uso de Variables en CSS: Custom Properties

En las versiones más recientes de CSS se ha incorporado una funcionalidad muy útil: las propiedades personalizadas, comúnmente conocidas como variables CSS. Esta capacidad no estaba presente en las primeras versiones del lenguaje, lo que llevó al auge de preprocesadores como Sass o LESS, que ofrecían esta funcionalidad desde sus inicios.

¿Qué son las CSS Custom Properties?

Aunque las llamamos variables, en realidad su nombre técnico es propiedades personalizadas (custom properties). Funcionan de forma similar a las variables en programación, pero con ciertas particularidades. Su objetivo es asignar valores reutilizables a las propiedades CSS, lo que mejora la legibilidad, reduce repeticiones y facilita el mantenimiento del código.

Cómo se definen las variables CSS

Para declarar una propiedad personalizada se utiliza el prefijo -- seguido del nombre elegido. Normalmente, estas variables se definen dentro del selector :root, que apunta al elemento <html>, y de esta forma se comportan como variables globales accesibles desde cualquier parte del documento.

cssCopiarEditar:root {
  --background-color: black;
}

Usar :root en lugar de html proporciona mayor especificidad, lo que puede influir en la cascada de estilos. Por convención, se agrupan las variables al principio del archivo CSS, separadas del resto de reglas, para facilitar su ubicación y gestión.

Cómo utilizar variables con var()

Para aplicar una propiedad personalizada en una regla CSS, se emplea la función var():

cssCopiarEditar:root {
  --background-color: indigo;
}

body {
  background: var(--background-color);
}

En este ejemplo, el valor de fondo se obtiene directamente de la variable --background-color definida en :root. Al estar declarada globalmente, se puede reutilizar en cualquier parte del documento.

Uso de valores por defecto (fallback)

La función var() permite establecer un valor alternativo por si la variable no ha sido definida:

cssCopiarEditarbody {
  background: var(--main-color, green);
}

En este caso, si --main-color no existe, se aplicará el color de fondo verde. También es posible utilizar otra variable como valor por defecto.

Ámbito o scope de las variables CSS

Las propiedades personalizadas pueden tener un ámbito local si se declaran dentro de un selector específico. Esto significa que su valor será accesible únicamente dentro de ese contexto.

cssCopiarEditar.parent {
  --background-color: black;
}

.child {
  background-color: var(--background-color);
}

.first {
  --background-color: gold;
}

En este ejemplo:

  • .parent define la variable localmente.
  • .child la usa, heredando el valor de su padre.
  • .first redefine la variable sólo para sí misma.

Esto permite una gran flexibilidad al estructurar temas o componentes reutilizables.

Ejemplo práctico de reutilización

htmlCopiarEditar<div class="card theme-love">
  <div class="frame">
    <h2>ManzDev</h2>
    <img src="manzdev-love.gif" alt="ManzDev">
  </div>
</div>

cssCopiarEditar.theme-love {
  --primary-color: pink;
}

.card {
  background-color: var(--primary-color);
}

La clase theme-love define un color primario que luego es aplicado dentro de la tarjeta .card, permitiendo fácilmente cambiar estilos visuales desde un único punto.

Diferencias frente a variables Sass o LESS

A diferencia de Sass o LESS, las variables CSS no se procesan previamente. Funcionan directamente en el navegador en tiempo real, lo que permite modificar su valor dinámicamente con JavaScript. Las variables de Sass, en cambio, se resuelven antes de que el navegador cargue el CSS, en una fase llamada preprocesamiento:

scssCopiarEditar// Sass
$color: #fff;

.parent {
  background: $color;
}

En este caso, $color se reemplaza por su valor antes de que llegue al navegador, por lo que no es modificable desde el lado del cliente.

Modificar variables CSS con JavaScript

Una de las ventajas de las custom properties es que pueden actualizarse dinámicamente desde JavaScript usando setProperty():

jsCopiarEditardocument.documentElement.style.setProperty('--background-color', 'blue');

Esto las convierte en una herramienta poderosa para temas dinámicos, configuraciones personalizadas y diseño reactivo.