Mixin

Les mixins dans Sass sont des blocs réutilisables de styles CSS. Ils permettent de centraliser du code tout en offrant la flexibilité de passer des paramètres pour personnaliser les styles.

DéfinitionMixin

Les mixins, comme les extends permettent de récupérer des morceaux de code.

On utilise la directive @mixin pour les créer et la directive @include pour les intégrer.

1
@mixim bloc{
2
  color: red;
3
}
4
.classe1{
5
  @include %bloc;
6
  font-style: normal;
7
}
8
.classe2{
9
  @include %bloc;
10
  font-style: italic;
11
}

Ce qui donne

1
.classe1 {
2
  color: red;
3
  font-style: normal;
4
}
5
6
.classe2 {
7
  color: red;
8
  font-style: italic;
9
}
DéfinitionParamètre
Les mixins sont paramétrables. Les valeurs par défaut sont optionnelles.
1
@mixin bloc($param1: valeurDefaut1, $param2: valeurDefaut2)
Exemple :
1
@mixin bloc($couleur: red){
2
    color: $couleur;
3
}
4
.classe1{
5
  @include bloc;
6
  font-style: normal;
7
}
8
.classe2{
9
  @include bloc(blue);
10
  font-style: italic;
11
}
Ce qui donne
1
.classe1 {
2
  color: red;
3
  font-style: normal; 
4
}
5
6
.classe2 {
7
  color: blue;
8
  font-style: italic; 
9
}