Declarar y usar variables CSS + fallback
En un proyecto real, el mismo color aparece repetido en decenas de propiedades: botones, títulos, bordes, íconos. Cambiar ese color obliga a editar cada regla por separado. Las custom properties resuelven esto: declarar el valor una vez y usarlo en todos lados.
1. Declarar: --nombre: valor
Una custom property se declara como cualquier regla CSS, pero el nombre empieza obligatoriamente con dos guiones:
:root {
--color-acento: royalblue;
--espacio-base: 1.5rem;
--radio: 8px;
}Los dos guiones son parte del nombre, no una convención visual. La spec los eligió porque garantiza que ninguna propiedad CSS oficial usa ese prefijo. Sin los dos guiones, el navegador ignora la declaración.
:root es el lugar estándar para variables globales. :root equivale al elemento <html> con la mayor especificidad del árbol — como es el ancestro de todos los elementos, las variables declaradas ahí se heredan a toda la página. (La herencia de variables funciona exactamente igual que la herencia de color o font-family que viste en CAT-14.)
Case-sensitive: --Color-Acento y --color-acento son dos variables distintas. Por convención se usa kebab-case en minúsculas.
2. Usar: var(--nombre)
var() sustituye el valor de la variable en el lugar donde se usa:
.boton {
background-color: var(--color-acento); /* sustituye por royalblue */
padding: var(--espacio-base); /* sustituye por 1.5rem */
border-radius: var(--radio); /* sustituye por 8px */
}El resultado es idéntico a escribir background-color: royalblue directamente — pero ahora el valor vive en :root. Un cambio ahí actualiza todos los elementos que usan esa variable.
3. Fallback: var(--nombre, respaldo)
El segundo argumento de var() se activa cuando la variable no está definida o tiene un valor inválido:
.boton {
color: var(--color-texto, white); /* si --color-texto no existe → white */
}El fallback puede ser cualquier valor CSS válido, incluyendo otra variable:
color: var(--color-texto, var(--color-claro, white));Un error frecuente: var() no funciona dentro de condiciones de media queries:
/* ❌ Esto NO funciona */
@media (min-width: var(--breakpoint-md)) { ... }
/* ✓ Solo funciona en valores de propiedades */
.el { padding: var(--espacio); }Por qué funciona: las variables se heredan
Las custom properties son propiedades CSS reales, y las propiedades CSS se heredan (CAT-14). Si :root declara --color-acento: royalblue, todos los elementos del documento heredan esa variable — body, main, .boton, .titulo. Cuando .boton usa var(--color-acento), lo toma del ancestro más cercano que lo declaró.
:root { --color-acento: royalblue; }
└─ body (hereda)
└─ .tarjeta (hereda)
└─ .boton → var(--color-acento) = royalblue ✓Tu turno: declarar --color-btn en :root y usarla en .boton y .titulo. El fallback en .boton se activa porque --color-texto no está definida en ningún lado.
Un color en un solo lugar: declarar y usar variables CSS
Un equipo de diseño quiere cambiar el color de acento de toda la página en un solo lugar. Ahora ese color está repetido en tres propiedades distintas. Tu tarea: 1. En `:root`, declarar la variable `--color-btn` con el valor `royalblue`. 2. En `.boton`, usar `var(--color-btn)` para el `background-color`. 3. En `.titulo`, usar `var(--color-btn)` para el `color`. 4. En `.boton`, también poner `color: var(--color-texto, white)`. (La variable `--color-texto` no está definida — el botón debe usar el fallback `white`.) Verificá que el color del botón y del título provienen de la misma variable.
Preview