sass
Mixins

Syntaxe

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

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 de mixin. N'oubliez pas de démarrer vos variables avec $ et séparez-les 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 désormais utilisés dans le footer et l'en- header , avec la valeur #ccc pour la variable $color et #ddd pour la variable $borderColor .

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 les arguments de mot clé 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, cela générera une erreur et pour utiliser une, deux ou trois valeurs, vous devrez définir trois autres mixins.

En utilisant la variable Argument, vous n'avez pas à vous soucier du nombre d'arguments que vous pouvez transmettre. 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 vous voulez accéder au second argument, vous pouvez le faire en écrivant propertyname : nth(variable_name, 2) .

Défauts sensibles

SASS vous donne la possibilité d'omettre n'importe quel paramètre, sauf ceux que vous souhaitez remplacer. Reprenons l'exemple de la 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, nous allons maintenant appeler le mixin en écrasant le deuxième paramètre

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

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

Arguments optionnels

Les arguments optionnels 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;
}

Donc, un appel à

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

va simplement sortir les éléments suivants 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 dont la valeur est null , ce qui est très utile lorsque nous devons inclure un argument facultatif dans notre appel ou non.

Directive @content

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

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

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

Et cela produirait:

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

Les mixins peuvent utiliser la directive @content et accepter toujours les paramètres.

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