Mixin

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;
}
Par Clouder le 19 Nov 2017
Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !