Tabla de contenido

Las variables CSS (oficialmente llamadas Custom Properties) llegaron para cambiar la forma en que escribimos y mantenemos código CSS. Si alguna vez has tenido que cambiar un color en 50 lugares del CSS, entiendes exactamente por qué existen.

¿Qué son las variables CSS?

Las variables CSS o custom properties son valores reutilizables que puedes definir una vez y usar en múltiples lugares de tu CSS. Si necesitas cambiar el color primario de tu sitio, solo cambias la variable y todos los elementos que la usan se actualizan automáticamente.

A diferencia de las variables de preprocesadores como SASS, las variables CSS son dinámicas: puedes modificarlas en tiempo real con JavaScript y responden a los media queries.

Sintaxis básica

Definir una variable CSS empieza con -- (doble guión):

:root {
  --color-primario: #E53E3E;
  --color-texto: #1A1B1D;
  --fuente-base: 'DM Sans', sans-serif;
  --espacio-lg: 2rem;
  --border-radius: 8px;
}

Usar una variable con la función var():

.boton {
  background-color: var(--color-primario);
  font-family: var(--fuente-base);
  border-radius: var(--border-radius);
  padding: var(--espacio-lg);
}

h1 {
  color: var(--color-texto);
}

También puedes definir un valor de fallback (respaldo) si la variable no existe:

.elemento {
  color: var(--color-acento, blue); /* usa blue si --color-acento no está definida */
}

Scope: variables globales y locales

Las variables definidas en :root son globales y están disponibles en todo el documento. :root representa el elemento <html>.

Pero también puedes crear variables locales que solo aplican dentro de un componente:

/* Global */
:root {
  --color-primario: #E53E3E;
}

/* Local al componente .tarjeta */
.tarjeta {
  --tarjeta-padding: 1.5rem;
  --tarjeta-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  padding: var(--tarjeta-padding);
  box-shadow: var(--tarjeta-shadow);
}

/* .tarjeta--destacada sobreescribe la variable local */
.tarjeta--destacada {
  --tarjeta-shadow: 0 8px 24px rgba(229, 62, 62, 0.3);
}

Caso de uso: sistema de colores

El uso más común de las variables CSS es definir un sistema de diseño con los colores, tipografías y espaciados de tu proyecto:

:root {
  /* Colores */
  --color-primario: #E53E3E;
  --color-primario-hover: #c53030;
  --color-secundario: #1A1B1D;
  --color-fondo: #111213;
  --color-fondo-2: #1A1B1D;
  --color-texto: #E8E6E1;
  --color-texto-muted: rgba(232, 230, 225, 0.6);
  
  /* Tipografía */
  --fuente-heading: 'Space Grotesk', sans-serif;
  --fuente-body: 'DM Sans', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  
  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  
  /* Bordes */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

Modo oscuro con variables CSS

Esta es una de las características más potentes. Puedes cambiar todos los colores del sitio con pocas líneas usando prefers-color-scheme:

:root {
  --bg: #ffffff;
  --texto: #111111;
  --card-bg: #f5f5f5;
  --border: rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111213;
    --texto: #E8E6E1;
    --card-bg: #1A1B1D;
    --border: rgba(255,255,255,0.08);
  }
}

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

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
}

El navegador aplica automáticamente el tema correcto según las preferencias del sistema operativo del usuario.

Variables CSS con JavaScript

A diferencia de SASS, las variables CSS son accesibles y modificables con JavaScript en tiempo real:

const root = document.documentElement;

// Leer el valor de una variable
const colorPrimario = getComputedStyle(root)
  .getPropertyValue('--color-primario')
  .trim();

console.log(colorPrimario); // "#E53E3E"

// Cambiar el valor de una variable
root.style.setProperty('--color-primario', '#3182CE');

// También funciona en elementos específicos
const elemento = document.querySelector('.card');
elemento.style.setProperty('--tarjeta-padding', '3rem');

Esto permite crear themes dinámicos que cambian en tiempo real sin recargar la página.

Diferencia con variables SASS/SCSS

CaracterísticaVariables CSSVariables SASS
Soporte en navegador✅ Nativo❌ Requiere compilación
Dinámicas✅ Sí❌ Solo en compilación
Accesibles con JS✅ Sí❌ No
Scope en cascada✅ Sí❌ No
Media queries✅ Puede usarlas❌ No

Hoy en día no necesitas SASS solo para las variables. Las Custom Properties de CSS nativo hacen lo mismo y más.

Las variables CSS son una de esas características que, una vez que las adoptas, no puedes imaginar cómo escribías CSS antes. Hacen tu código más mantenible, flexible y poderoso.