L’héritage des propriétés CSS
Sass nous permet à travers une règle @extend de mettre en place un système d’héritage des styles d’un sélecteur à un autre.
Concrètement, nous allons pouvoir définir un ensemble de propriétés CSS qu’on va lier à un sélecteur puis utiliser @extend pour partager cet cet ensemble de propriétés avec d’autres sélecteurs.
En pratique, cela permet d’organiser son code différemment en groupant les règles plutôt que les sélecteurs, ce qui peut permettre d’avoir une meilleure vue d’ensemble et ce qui peut rendre le code plus facile à maintenir.
ici, on utilise la notion d’héritage Sass pour passer ou “étendre” les styles définis dans notre sélecteur de classe .text-box aux sélecteurs .info et .warning.
On voit bien dans le rendu CSS que ces trois sélecteurs partagent les styles qui ont été définis dans .text-box.
Le sélecteur placeholder Sass %
Utiliser la fonctionnalité d’héritage Sass devient particulièrement pertinent lorsqu’on l’utilise avec le sélecteur placeholder %.
Ce sélecteur permet de créer un ensemble de règles qui n’apparaitront dans la sortie CSS (dans le rendu final) qui si il est étendu avec @extend. Cela permet donc de créer des ensembles de règles qu’on va ensuite pouvoir utiliser ou pas et permet donc d’avoir un fichier de style beaucoup plus clair et concis.
Les sélecteurs placeholders vont être notamment utiles lors de l’écriture d’une bibliothèque Sass où chaque règle de style peut ou non être utilisée. En pratique, ils sont peu utilisés sur des projets simples et personnels.
Dans l’exemple précédent, par exemple, la classe .text-box n’est jamais utilisée en soi dans notre fichier, elle est simplement étendue. On va pouvoir ici utiliser un sélecteur placeholder plutôt qu’une sélecteur de classe afin de faire en sorte qu’elle ne soit pas inclue dans la feuille destine finale.
