Mixin en Sass

Un mixin vous permet de créer des groupes de déclarations CSS que vous souhaitez réutiliser sur votre site. Vous pouvez même transmettre des valeurs pour rendre votre mixin plus flexible.

Voici un exemple avec un border-radius avec la syntaxe en Scss.

@mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
}

.box { @include border-radius(10px); }

Voici le même exemple avec syntaxe en Sass.

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

On déclare la mixin comme une fonction avec un paramètre à faire passer dans cette fonction.

• Le nom de la fonction est border-radius,
• Le paramètre d'entré est $radius.

Ensuite on inclut la fonction dans son code scss avec le paramètre souhaité.

Le résultat final de cet exemple sera.

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}