Les mixins Sass

Les mixins Sass nous permettent de créer des groupes de déclarations CSS en vue de les réutiliser plus tard dans notre code. Cela peut notamment s’avérer utile pour les quelques propriétés CSS qui requièrent toujours l’usage des préfixes vendeurs ou pour certains projets avec des besoins précis et pour lesquels on va pouvoir gagner beaucoup de temps en créant des groupes de règles.

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é.

Présentation des mixins Sass - html

Présentation des mixins Sass - scss

Présentation des mixins Sass - css

Présentation des mixins Sass - resultat

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.