Un paramètre qui varie impose le mixin, pas @extend
Les deux évitent de recopier des styles. Ils ne produisent pas le même CSS, et c'est ce qui guide le choix.
Le mixin : une fonction qui retourne du CSS
Chaque @include copie le bloc à l'endroit de l'appel, avec les valeurs passées en paramètres. Regarde le CSS à droite : le bloc est dupliqué.
@extend : regrouper les sélecteurs
@extend regroupe les sélecteurs qui partagent des règles au lieu de dupliquer le bloc. Étends un placeholder (%nom, jamais compilé seul) plutôt qu'une vraie classe, pour ne pas créer de lien caché entre deux composants sans rapport.
Comment choisir
| Critère | Mixin | @extend |
|---|---|---|
| Paramètres | Oui | Non |
| CSS généré | Dupliqué à chaque @include | Sélecteurs regroupés, CSS plus compact |
| Risque | Fichier CSS plus lourd si beaucoup d'appels | Lien caché entre sélecteurs éloignés dans le code |
Règle pratique : besoin d'un paramètre, mixin, sans exception. Pas de paramètre et vraie relation de « même famille », @extend sur un placeholder. Dans le doute, mixin.