Anidamiento y capas en CSS

Dos sumas modernas: reglas anidadas y capas de cascada para ordenar.

@layer reset, base, components;

@layer components {
  .card {
    padding: 1rem;

    & .title {
      font-weight: 600;
    }

    &:hover {
      background: #14161c;
    }

    @media (width >= 48rem) {
      padding: 1.5rem;
    }
  }
}

Cómo funciona

1. & se refiere al selector padre dentro de una regla anidada.
2. Una media query anidada deja el breakpoint junto a la regla.
3. @layer ordena bloques enteros sin importar la especificidad.

Palabras clave y builtins usados aquí

• background
• layer
• media
• padding
• rem

El intento, en números

Líneas

19

Caracteres a escribir

191

Tokens

60

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 40 segundos.

Escribe este fragmento

Paso 2 de 2 en Contenido generado; paso 20 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →