Mélanges

Syntaxe

  • @mixin mixin-name ($argument1, $argument, ...){ ... }

Mixin avec argument variable

Il y a des cas dans les mixins où il peut y avoir un ou plusieurs arguments lors de son utilisation. Prenons un cas de border-radius où il peut y avoir un seul argument comme border-radius:4px; ou plusieurs arguments comme border-radius:4px 3px 2px 1px;.

Le mélange traditionnel avec des arguments de mots clés sera comme ci-dessous : -

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

Et utilisé comme

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

L’exemple ci-dessus est complexe (à coder, lire et maintenir) et si vous ne pouvez pas transmettre une seule valeur ou deux valeurs, il générera une erreur, et pour utiliser ** une, deux ou il ** valeurs que vous devez définir trois autres mixins.

En utilisant Argument variable, vous n’avez pas à vous soucier du nombre d’arguments que vous pouvez passer. Les arguments variables peuvent être déclarés en définissant un nom de variable suivi de trois points(…). Voici un exemple d’argument de variable.

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

Et utilisé comme

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

L’exemple ci-dessus est beaucoup plus simple (pour coder, maintenir et lire), vous n’avez pas à vous soucier du nombre d’arguments à venir - est-ce un ou plusieurs.

S’il y a plus d’un argument et que dans tous les cas vous souhaitez accéder au deuxième argument, vous pouvez le faire en écrivant nompropriété : nth(nom_variable, 2).

Créer et utiliser un mixin

Pour créer un mixin, utilisez la directive @mixin.

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Vous pouvez spécifier une liste d’arguments entre parenthèses après le nom du mixin. N’oubliez pas de commencer vos variables par $ et de les séparer par des virgules.

Pour utiliser le mixin dans un autre sélecteur, utilisez la directive @include.

footer, header{ @include default-box (#ddd, #ccc); }

Les styles du mixin seront maintenant utilisés dans le footer et header, avec la valeur #ccc pour la variable $color et #ddd pour la variable $borderColor.

Arguments facultatifs

Les arguments facultatifs de SASS vous permettent d’utiliser un paramètre uniquement si vous spécifiez sa valeur ; sinon, il sera ignoré. Prenons un exemple du mixin suivant :

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

Alors un appel à

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

affichera simplement ce qui suit dans le fichier CSS :

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASS ne génère pas de propriétés avec null comme valeur, ce qui est très utile lorsque nous devons inclure ou non un argument facultatif dans notre appel.

@directive de contenu

Les mixins peuvent recevoir un bloc de code conforme à SASS, qui devient alors disponible dans le mixin en tant que directive @content.

@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }
}

Et cela donnerait :

  @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }

Les mixins peuvent utiliser la directive @content tout en acceptant les paramètres.

@mixin small-screen($offset) {...

Valeurs par défaut raisonnables

SASS vous donne la possibilité d’omettre n’importe quel paramètre sauf ceux que vous souhaitez écraser bien sûr. Reprenons l’exemple default-box :

@mixin default-box ($color: red, $borderColor: blue) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

Ici on va maintenant appeler le mixin en ayant écrasé le deuxième paramètre

footer, header{ @include default-box ($borderColor: #ccc); }

la valeur de $borderColor est #ccc, tandis que $color reste rouge

← Installation
Les fonctions →