On va créer un mixant Sass avec la règle @mixin. Il va falloir donner un nom à chacun de nos mixins pour pouvoir s’ne resservir plus tard. Ensuite, on va inclure nos mixins dans n’importe quelle déclaration CSS grâce à la règle @include.
Les mixins paraissent très similaires à l’héritage Sass à première vue mais le code CSS ne sera pas le même au final et les cas d’usage sont en fait différents. Concrètement, lorsqu’on utilise l’héritage et @extend, les sélecteurs CSS vont être groupés autour des règles en commun lors de la compilation du code. Lorsqu’on utilise les mixins, les règles vont être au contraire dupliquées ce qui peut résulter en des feuilles de style beaucoup plus lourdes au final.
Pour cette raison, on utilisera peu les mixins en pratique. Je ne vous les présente ici que par souci d’exhaustivité.
Ici, on utilise un mixin pour la propriété transform. Il faut imaginer que notre projet utilise beaucoup cette propriété et qu’on a besoin d’indiquer les préfixes vendeurs afin que la propriété soit bien comprise par tous les navigateurs.
Utiliser les mixin nous permet d’écrire notre groupe de règle une seule fois pour toutes avec Sass et donc d’avancer plus rapidement sur notre projet. Cependant, les règles liés au mixin seront dupliquées pour chaque sélecteur dans la feuille de style finale.
