L’imbrication de sélecteurs avec Sass

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, vue qui serait considéré comme une mauvaise pratique !

Imbrication des sélecteurs Sass - html

Imbrication des sélecteurs Sass - scss

Imbrication des sélecteurs Sass - css

Imbrication des sélecteurs Sass - resultat

 

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 &

Présentation du sélecteur parent Sass

Présentation du sélecteur parent Sass