Cargando...

Variables CSS

Los filtros retocaron píxeles. Las custom properties (variables CSS) mejoran el mantenimiento: un --brand en :root y muchos botones leen var(--brand) — cambias el token una vez y la interfaz sigue. Cascadan y heredan como propiedades normales; los nombres los eliges tú.

Nombres propios: `--token`

Parece una declaración normal, pero el nombre empieza con dos guiones:

Tokens globales en :root

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root es la raíz del documento — sitio habitual de tokens globales. También puedes definir --names en cualquier selector; los descendientes heredan salvo override más cercano.

Leer con `var()`

Botón primario con tokens

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

Enfoque: tokens + var(). Nombres consistentes en el proyecto.

Respaldo en `var()`

Respaldo si falta el token

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

El segundo argumento es respaldo; no corrige un nombre mal escrito en var().

Alcance y overrides locales

📊 Dónde poner custom properties

Alcance	Selector típico	Cuándo
Tokens globales	`:root`	Marca, espaciado, radios
Tema de componente	`.card`, `.alert`	Defaults de un patrón
Variante	`.card.is-warning`	Cambiar pocos tokens
Runtime	`[data-theme="dark"]`	Paleta nueva; mismos `var(--surface)`

Override cerca del elemento. :root afecta a todo; a veces basta un --accent local.

Acento local en una card

Subárbol con accent propio

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

.is-featured solo cambia --accent; título y borde siguen vía var().

Cambio de tema sin duplicar colores

Claro por defecto, oscuro con data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

body {
background: var(--surface);
color: var(--text);
}

JavaScript puede cambiar dataset.theme — los tokens se actualizan en vivo.

Custom properties vs `$` de Sass

Sass muere al compilar; --tokens viven en la cascada del navegador.

Pruébalo

Cinco tokens en :root; botón solo con var().
--accent en .card + .is-featured.
Quita un token y usa fallback.
[data-theme="dark"] en DevTools.
Sustituye #2563eb repetido por var(--brand).

Errores comunes

brand: sin --
var() como nombre de propiedad
typo sin fallback
confundir variables con filtros

Resumen

--name; var(--name, fallback)
:root global; override local
Siguiente: calc en Modern Toolkit

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma