L’imbrication de sélecteurs CSS avec Sass
L’imbrication et donc la hiérarchisation de la structure d’une page est l’un des principes fondamentaux du HTML.
Le CSS, en contrepartie, n’offre toujours pas à ce jour de moyen d’imbriquer les sélecteurs CSS de la même façon qu’on imbrique les éléments HTML les uns dans les autres.
Sass propose cette fonctionnalité. Cela permet une meilleure organisation et lisibilité du code CSS dans son ensemble.
Faites cependant attention à ne pas trop abuser de cette fonctionnalité pour ne pas créer de sélecteur trop sur qualifié et pour ne pas au contraire obtenir au final un code CSS plus lourd et moins lisible, ce qui serait considéré comme une mauvaise pratique !
Le sélecteur parent Sass &
Le sélecteur parent &
est un sélecteur spécial inventé par Sass qui est utilisé dans les sélecteurs imbriqués pour faire référence au sélecteur extérieur.
Ce sélecteur peut être utile si on souhaite réutiliser le sélecteur externe de manière plus complexe, comme par exemple pour ajouter une pseudo-classe ou pour ajouter un sélecteur avant le parent.
Notez que le sélecteur parent n’est autorisé qu’au début des sélecteurs composés, là où un sélecteur de type est également autorisé. Par exemple, on peut écrire & span
mais pas span &