Nesting

Sass 🟢 Junior

Definition

Possibilite d'imbriquer les selecteurs pour refleter la hierarchie HTML. Le caractere & reference le selecteur parent.

Analogie

Des poupees russes : chaque niveau contient le suivant, et & c'est la poupee dans laquelle tu te trouves.

Exemple de code

.card {
  padding: 1rem;
  &__title { font-size: 1.5rem; }
  &:hover { box-shadow: 0 4px 6px #0002; }
  &.is-active { border-color: blue; }
}

Cas d'usage

Organiser le CSS en suivant la structure des composants et la convention BEM.

Anti-pattern

Imbriquer trop profondement (>3 niveaux) ce qui cree des selecteurs trop specifiques.

Termes lies

#styling#interview#sass