L'imbrication reflète la hiérarchie HTML dans le CSS

Plus besoin de retaper le sélecteur parent à chaque enfant. Le symbole & désigne ce sélecteur parent.

Le symbole &

Regarde à droite ce que deviennent &__title et &:hover. Utile pour les états comme &:hover ou &.active.

Modifie le code, le CSS se met à jour

SCSS (ce que tu écris)

CSS (ce que lit le navigateur)

Le piège : au-delà de 3 niveaux

Imbriquer sur plus de 3 niveaux produit des sélecteurs très spécifiques, difficiles à surcharger ensuite. Regarde le sélecteur final à droite : c'est lui qu'il faudrait battre en spécificité.

Quatre niveaux d'imbrication, un sélecteur à rallonge

SCSS (ce que tu écris)

CSS (ce que lit le navigateur)

Ce seuil de 3 niveaux est une recommandation de la communauté (Sass Guidelines, section « Nesting »), pas une limite du compilateur.