Ámbito: :root global vs scope local
La lección anterior declaró una variable en :root — disponible en toda la página. Pero las custom properties pueden declararse en cualquier selector, limitando su alcance a ese subárbol del DOM. Esto abre el patrón más poderoso del módulo: un mismo componente con múltiples variantes de color, definidas cada una en un solo lugar.
:root como scope global
:root es el selector estándar para variables que deben estar disponibles en toda la página:
:root {
--color-primario: royalblue; /* disponible en todos los elementos */
}Como :root equivale a <html> (el ancestro de todo), las variables que declara se heredan a cualquier elemento que las use con var().
Declarar en un selector limita el alcance
Una variable declarada en .tarjeta solo existe para .tarjeta y sus descendientes:
.tarjeta {
--acento: royalblue;
}
/* var(--acento) funciona dentro de .tarjeta y sus hijos */
/* fuera de .tarjeta, var(--acento) no tiene valor → inválido o fallback */Esto ocurre porque las custom properties siguen la herencia CSS (CAT-14): un hijo hereda las propiedades de su padre. Una variable declarada en .tarjeta “baja” a todos sus descendientes pero no “sube” ni “viaja” a otros elementos.
El caso de uso más poderoso: variantes del mismo componente
El mismo CSS de base puede producir resultados visuales distintos según el scope local de cada variante:
/* El componente base: usa --acento sin saber qué color es */
.alerta {
border-left: 4px solid var(--acento);
}
.alerta__titulo {
color: var(--acento);
}
/* Cada variante define --acento para su subárbol */
.alerta--info { --acento: steelblue; }
.alerta--peligro { --acento: crimson; }.alerta está definido una sola vez. Para cambiar el color de la variante de peligro, solo se toca --acento en .alerta--peligro. No hay que duplicar el CSS base ni usar selectores largos de sobreescritura.
Variables de Sass ($var) vs custom properties CSS
Las variables de Sass son constantes de compilación: se resuelven antes de que el navegador las vea y no existen en el DOM. Las custom properties CSS son propiedades reales del navegador: se heredan, se pueden cambiar en runtime (vía JS o media queries), y el scope local que acabás de ver es posible precisamente porque viven en el árbol del documento.
Si llegás con experiencia en Sass, el concepto es similar — pero el mecanismo es completamente diferente.
La herencia lleva la variable al hijo
En el ejercicio, .alerta__titulo no declara --acento — lo hereda de su padre .alerta--info. Cuando .alerta__titulo usa var(--acento), busca hacia arriba en el DOM hasta encontrar el primer ancestro que lo declaró. Lo encuentra en .alerta--info. Esa es la cascada e herencia (CAT-14) funcionando exactamente igual que con color o font-family.
Tu turno: declarar --acento con valores distintos en .alerta--info y .alerta--peligro. El CSS base no se toca — el color cambia solo por el scope local de cada variante.
La misma variable, dos colores: scope local en variantes
Tenés un componente `.alerta` que usa `var(--acento)` para el borde izquierdo y el color del título. El CSS base ya está dado — no lo modifiques. Tu tarea: declarar localmente el color de acento para cada variante. 1. En `.alerta--info`, declarar `--acento: steelblue`. 2. En `.alerta--peligro`, declarar `--acento: crimson`. El resultado: misma estructura HTML y CSS base, dos colores distintos — solo cambia la variable local.
Preview