SASS - L'héritage

Sass permet de mettre en place un héritage des classes facilement grâce au mot clé @extend de façon à récupérer toutes les propriétés d'une classe sans avoir à les réécrire.

Pour rappel, un héritage, c'est lorsque l'on reçoit quelque chose qui vient s'additionner à ce que l'on possède déjà. En Sass c'est le même processus.

Utilisation

Prenons l'exemple d'une classe permettant de créer un bouton. Ce bouton aura les mêmes bases, sauf la couleur de fond :

.btn {
    padding: 12px 24px;
    color: $white;
    border-radius: 6px;
}

.btn_infos {
    @extend .btn;
    background-color: blue;
}

.btn_delete {
    @extend .btn;
    background-color: red;
}

L'idée est d'étendre un style via une autre classe CSS en récupérant ce qui existe déjà.
Nous avons dorénavant 3 classes CSS utilisables, sachant que la classe .btn ne possède aucune couleur de fond.

Sélecteur placeholder %

Le sélecteur placeholder % devient très intéressant quand on veut étendre des propriétés d'une classe que nous n’utiliserons pas.

Dans notre exemple ci-dessus, je ne compte pas utiliser la classe .btn, car elle ne possède aucune couleur de fond. Par contre, ses propriétés m'intéressent fortement. J'utilise le placeholder % plutôt qu'un sélecteur de classe CSS.

%btn {
    padding: 12px 24px;
    color: $white;
    border-radius: 6px;
}

.btn_infos {
    @extend %btn;
    background-color: blue;
}

.btn_delete {
    @extend %btn;
    background-color: red;
}