SASS - Les mixins

Les mixins permettent de créer des groupes de propriétés CSS en vue de leur réutilisation.

Utilisation

Les mixins se déclarent avec le mot clé @mixin suivi d'un nom que l'on appellera au besoin.

/* Si aucune valeur n'est précisée alors $height vaut 0.8em */
@mixin style($style, $height : 0.8em) {
    list-style: $style;
    line-height: $height;
}

.menuList {
    @include style('none');
}

L'usage de ce mot clé est le même que lorsque l'on utilise l'héritage et @extend, mais une différence existe entre les deux. L'héritage possède plusieurs propriétés que l'on étendra au besoin, mais son code ne sera pas dupliqué en CSS, alors que les mixinsseront eux dupliqués à chaque appel, ce qui alourdira la feuille de style inutilement.

Donc, l’utilisation des mixins se fait de façon ponctuelle et rare.