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.
// Elle se définit grâce à la directive @mixin puis le nom que vous souhaitez lui attribuer
@mixin inline-block {
// code
}
// Pour inclure votre mixins, une ligne suffit
@include inline-block;
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 :
@mixin inline-block($align, $margin : 10px) { // Si aucune valeur n'est précisée alors $margin vaut 10px
display: inline-block;
vertical-align: $align;
margin-left: $margin;
}
// Appel de la mixin
.bloc {
@include inline-block(middle);
}
Fichier CSS compilé :
.bloc {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
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.
// Une fonction se définit avec la directive @function :
@function percentage($num) {
// code
}
// L'appel d'une fonction est différent des mixins.
// En effet, son utilisation se fera directement au niveau de la valeur d'un attribut
.bloc {
width: percentage($num/$container-width); // calcul le pourcentage de .bloc
color: darken(white, 20%); // assombrit la couleur de 20%
Retrouvez le liste complète des fonctions SASS et Compass.