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.