CodeForge

Maquetación Web Dinámica / Arquitectura CSS y design tokens

Variables CSS a fondo: scope, fallbacks y JS

Teoría22 min20 XP

El primer pilar de un CSS que escala es dejar de repetir valores a mano. Las variables CSS (custom properties) te dejan definir un valor UNA vez y usarlo en todas partes — y como viven en el navegador (no se borran al compilar, a diferencia de las variables de Sass), puedes cambiarlas por scope, darles fallbacks y hasta modificarlas en vivo con JavaScript. El fin de los "casi el mismo violeta".

El panel de control con perillas

Declarar y usar

variables.css
:root {
--acento: #6d28d9;         /* se declara con -- */
--espacio: 16px;
--radio: 10px;
}

.boton {
background: var(--acento); /* se usa con var() */
padding: var(--espacio);
border-radius: var(--radio);
}

:root (el <html>) es el lugar clásico para las variables globales: declaradas ahí, están disponibles en TODA la página. Ahora el color de marca vive en UN sitio; cambiarlo actualiza cada uso.

Fallbacks: un plan B

var() acepta un segundo valor por si la variable no está definida:

fallback.css
.tarjeta {
color: var(--texto, #1e293b);   /* si --texto no existe, usa #1e293b */
gap: var(--gap, 12px);
}

Útil para componentes reutilizables que definen valores por defecto pero permiten personalización desde fuera.

Scope: la misma variable, distinto valor por contexto

Aquí está lo poderoso que Sass no puede hacer: una variable puede tener distinto valor según DÓNDE se use, porque se hereda por la cascada. Redefine --acento en un contenedor y todo lo que hay dentro cambia:

scope.css
:root { --acento: #6d28d9; }        /* violeta por defecto */

.zona-peligro { --acento: #dc2626; } /* dentro de aquí, --acento es rojo */

/* el MISMO componente .boton se adapta a su contexto sin código extra */
.boton { background: var(--acento); }
/* un .boton normal es violeta; uno dentro de .zona-peligro es rojo */

Cámbialas en vivo con JavaScript

Como las variables existen en el navegador, JS puede modificarlas — y todo lo que las use se actualiza al instante:

Mueve el selector de color: el botón, el enlace y el badge cambian TODOS a la vez, porque los tres leen var(--acento) y JavaScript giró esa única perilla con setProperty. Esta combinación —variables + JS— es la base de los cambiadores de tema, los editores de personalización en vivo y mucho más.

¿Cuál es la diferencia clave entre una variable CSS (--x) y una variable de Sass ($x) para un cambiador de tema en vivo?

Mini-reto

Refactoriza "El Observador": lleva TODOS sus colores, espaciados y radios repetidos a variables en :root, y reemplaza cada valor a mano por su var(). Luego prueba el poder del scope: crea una sección con --acento redefinido y observa cómo los mismos componentes se adaptan sin tocar su CSS. Acabas de eliminar los "casi iguales" de la lección anterior.

Qué sigue

Tienes las perillas. Ahora las organizas en un SISTEMA. La próxima lección introduce los DESIGN TOKENS: no cualquier variable, sino un conjunto pensado de decisiones de diseño —color, espaciado, tipografía, sombras— nombradas con intención. La mentalidad que, además, es exactamente la de Tailwind.