Imbriquer — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

Imbriquer

Variables, transitions, animations et projet · niveau 2

Énoncé

Réécrire la feuille obtenue à l'exercice précédent avec l'imbrication native de CSS : une seule règle de premier niveau pour le composant. Ajouter au passage un changement de soulignement du lien au survol. Quelle écriture, fréquente en Sass, faut-il éviter pour la variante ?

Corrigé


.promo {
  --promo-fond: var(--creme);

  padding: 1rem 1.5rem;
  background: var(--promo-fond);
  border-left: 6px solid var(--ocre);

  &.promo-urgente {
    --promo-fond: #f3e3d3;
  }

  & h2 {
    margin: 0 0 0.5rem;
    color: var(--bleu-nuit);
  }

  & a {
    font-weight: 700;
    color: var(--bleu-nuit);

    &:hover {
      text-decoration: none;
    }
  }
}

Avec l'imbrication, on peut se passer des classes d'éléments (& h2 vaut .promo h2). Il faut éviter &--urgente ou &-urgente : en Sass, c'est une concaténation de texte, en CSS natif une erreur, et la variante ne s'applique pas. Avec &.promo-urgente, Chromium calcule bien le fond rgb(243, 227, 211) (page code/ch10/exercices/promo-imbrique.html).