Propiedades personalizadas en CSS

Variables que siguen la cascada, aceptan fallbacks y se definen por componente.

:root {
  --accent: #7c5cff;
  --radius: 0.5rem;
  --pad: 1rem;
}

.button {
  background: var(--accent);
  border-radius: var(--radius);
  padding: var(--pad) calc(var(--pad) * 1.5);
}

.button.danger {
  --accent: #e5484d;
}

.card {
  border-radius: var(--card-radius, var(--radius));
}

Cómo funciona

Una propiedad personalizada empieza con dos guiones.
var(--name, fallback) cubre el caso sin definir.
Redefinirla en un hijo cambia el tema solo de ese subárbol.

Palabras clave y builtins usados aquí

background
calc
padding
rem

El intento, en números

Líneas: 19
Caracteres a escribir: 273
Tokens: 78
Ritmo de tres estrellas: 85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 55 segundos.

Escribe este fragmento

Paso 1 de 3 en Propiedades personalizadas; paso 5 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →