Variables con fallback en CSS

El segundo argumento de var() es qué usar cuando la variable no está definida.

.stack {
  display: grid;
  gap: var(--stack-gap, 1rem);
}

.stack.tight { --stack-gap: 0.25rem; }
.stack.loose { --stack-gap: 2rem; }

.button {
  --button-bg: #2b6cb0;
  background: var(--button-bg);
  padding: var(--button-padding, 0.5rem 1rem);
  border-radius: var(--radius, 0.375rem);
}

.button.danger { --button-bg: #dc2626; }

Cómo funciona

1. var(--gap, 1rem) usa 1rem hasta que algo defina --gap.
2. Una variable definida en una clase solo aplica dentro de ese subárbol.
3. Un valor inválido invalida la declaración completa al momento de computarse.

Palabras clave y builtins usados aquí

• background
• display
• gap
• grid
• padding
• rem

El intento, en números

Líneas

16

Caracteres a escribir

322

Tokens

87

Ritmo de tres estrellas

85 tpm

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

Escribe este fragmento

Paso 2 de 3 en Propiedades personalizadas; paso 6 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →