SASS – Leçon 4 : les mixins et les fonctions
Les mixins
Une mixin est un morceau de code paramétrable et réutilisable n’importe où dans votre fichier SASS. Comme pour une fonction, une mixin peut prendre des paramètres.
Mixin avec des paramètres
Grâce aux mixins, il vous sera possible de générer plusieurs dizaines de lignes CSS avec une seule ligne (paramétrable, ou non) en SCSS !
Exemple :
Fichier CSS compilé :
SASS n’intègre aucune mixin préconçue. Néanmoins, c’est l’un des points forts de Compass qui lui, propose une centaine de mixins prêtes à l’emploi : Compass Mixins.
Les fonctions
La différence entre une mixin et une fonction est le résultat retourné une fois compilé. Une mixin peut vous générer plusieurs lignes de code CSS tandis qu’une fonction vous retournera uniquement une valeur.
Grâce aux fonctions, il vous sera possible de calculer le pourcentage d’un bloc, de convertir une unité « px » en « em/rem » ou encore d’éclaircir une couleur.
Retrouvez le liste complète des fonctions SASS et Compass.