Création d'un mixin Sass avec des arguments facultatifs

Question

J'écris un mixin comme ceci :

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
    -webkit-box-shadow: $top $left $blur $color $inset;
    -moz-box-shadow: $top $left $blur $color $inset;
    box-shadow: $top $left $blur $color $inset;
}

Quand on m'appelle, ce que je veux vraiment, c'est que si aucun $inset est passée, rien n'est produit, plutôt que de compiler quelque chose comme ceci :

-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";

Comment réécrire le mixin pour que s'il n'y a pas de valeur de $inset passé, rien n'est sorti ?

Answer 1

Une manière DRY'r de le faire

Et, en général, une astuce pour enlever les guillemets.

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color #{$inset};
  -moz-box-shadow:    $top $left $blur $color #{$inset};
  box-shadow:         $top $left $blur $color #{$inset};
}

SASS Version 3+, vous pouvez utiliser unquote() :

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow:    $top $left $blur $color unquote($inset);
  box-shadow:         $top $left $blur $color unquote($inset);
} 

J'ai trouvé ça ici : passer une liste à un mixin comme un seul argument avec SASS

Answer 2

Sass prend en charge @if déclarations. (Voir le documentation .)

Vous pourriez écrire votre mixin comme ceci :

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  @if $inset != "" {
    -webkit-box-shadow:$top $left $blur $color $inset;
    -moz-box-shadow:$top $left $blur $color $inset;
    box-shadow:$top $left $blur $color $inset;
  }
}

Answer 3

Vieille question, je sais, mais je pense qu'elle est toujours pertinente. On peut dire qu'une façon plus claire de procéder consiste à utiliser la fonction unquote() (dont SASS dispose depuis la version 3.0.0) :

@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
  -webkit-box-shadow: $top $left $blur $color unquote($inset);
  -moz-box-shadow: $top $left $blur $color unquote($inset);
  box-shadow: $top $left $blur $color unquote($inset);
}

C'est à peu près équivalent à la réponse de Josh, mais je pense que la fonction explicitement nommée est moins obscure que la syntaxe d'interpolation de chaîne.

Answer 4

Je sais que ce n'est pas exactement la réponse que tu cherchais mais tu pourrais passer "null" comme dernier argument lorsque @include box-shadow comme ceci @include box-shadow(12px, 14px, 2px, green, null); Maintenant, si cet argument n'est qu'un seul dans cette propriété, alors cette propriété (et sa valeur (par défaut)) ne sera pas compilée. S'il y a deux args ou plus sur cette "ligne", seuls ceux que vous avez annulés ne seront pas compilés (votre cas).

La sortie CSS est exactement comme vous le vouliez, mais vous devez écrire votre null s :)

  @include box-shadow(12px, 14px, 2px, green, null);

  // compiles to ...

  -webkit-box-shadow: 12px 14px 2px green;  
  -moz-box-shadow: 12px 14px 2px green;  
  box-shadow: 12px 14px 2px green;

Answer 5

@mixin box-shadow($left: 0, $top: 0, $blur: 6px, $color: hsla(0,0%,0%,0.25), $inset: false) {
    @if $inset {
        -webkit-box-shadow: inset $left $top $blur $color;
        -moz-box-shadow: inset $left $top $blur $color;
        box-shadow: inset $left $top $blur $color;
    } @else {
        -webkit-box-shadow: $left $top $blur $color;
        -moz-box-shadow: $left $top $blur $color;
        box-shadow: $left $top $blur $color;
    }
}