Qué son las variables en CSS y cómo utilizarlas

Tiempo de lectura: 2 minutos

Las variables en CSS (también llamadas custom properties) permiten guardar valores reutilizables, como colores, tamaños o espaciados, para usarlos en múltiples lugares del código.
Si cambias el valor en un sitio, se actualiza en todos los lugares donde se use.

Son especialmente útiles si estás trabajando en proyectos grandes tipo web HTML o en React o usando MUI, porque te ayudan a mantener consistencia visual.

1. Cómo se declara una variable en CSS

Las variables se declaran usando dos guiones al principio del nombre:

--nombre-de-la-variable: valor;

Normalmente se declaran en el selector :root para que estén disponibles globalmente en todo el documento:

:root {
  --color-principal: #1976d2;
  --color-secundario: #ff9800;
  --espaciado-base: 16px;
  --radio-borde: 8px;
}

:root representa el elemento raíz del documento (html), por eso es buena práctica definirlas ahí cuando quieres que sean globales.

2. Cómo usar una variable

Para usar una variable se utiliza la función var():

selector {
  propiedad: var(--nombre-de-la-variable);
}

Ejemplo práctico:

body {
  background-color: var(--color-principal);
  padding: var(--espaciado-base);
}

.card {
  border-radius: var(--radio-borde);
  background-color: var(--color-secundario);
}

Si mañana cambias --color-principal en :root, todo el diseño cambia automáticamente.

3. Variables con valor por defecto

Puedes definir un valor alternativo por si la variable no existe:

color: var(--color-texto, black);

Si --color-texto no está definida, se usará black.

4. Variables locales (scope)

Las variables en CSS respetan el alcance (scope).
No siempre tienen que ir en :root. Puedes definirlas dentro de un selector específico.

Ejemplo:

.card {
  --color-fondo: #f5f5f5;
  background-color: var(--color-fondo);
}

Aquí --color-fondo solo existe dentro de .card y sus hijos.

Esto es potente para crear componentes con estilos encapsulados.

5. Cambiar variables dinámicamente con clases

Puedes redefinir variables para cambiar temas o modos (muy útil para dark mode).

Ejemplo:

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

.dark-mode {
  --color-fondo: #121212;
  --color-texto: white;
}

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

Si añades la clase dark-mode al body, cambian automáticamente todos los colores.

6. Variables y JavaScript

Puedes modificar variables desde JavaScript:

document.documentElement.style.setProperty('--color-principal', '#4caf50');

Esto es útil si quieres cambiar el tema según una acción del usuario.

7. Buenas prácticas

Usa nombres claros y consistentes
Ejemplo:
–color-primary
–spacing-md
–border-radius-lg

Agrupa por categorías si el proyecto es grande

:root {
  /* Colores */
  --color-primary: #1976d2;
  --color-danger: #d32f2f;

  /* Espaciados */
  --spacing-sm: 8px;
  --spacing-md: 16px;

  /* Bordes */
  --radius-md: 8px;
}

No abuses de variables para valores que solo se usan una vez.