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;
}
Cette pub permet au site de vivre ...
Voir d'autres articles
PHP
Redimensionner une image en carré
Créer son site de rencontres
Charger automatiquement les messages
PHP
Compresser une image
Cette pub permet au site de vivre ...