passer une liste à un mixin en un seul argument avec SASS

Question

J'aime faire des mixin avec SASS qui m'aident à faire de la bonne compatibilité inter-navigateur. Je veux faire un mixin qui ressemble à ceci:

@mixin box-shadow($value) {
    box-shadow: $value;
    -webkit-box-shadow: $value; 
    -moz-box-shadow: $value; 
}

à qui je peux passer à quelque chose comme ceci:

@include box-shadow(inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f);

le résultat étant quelque chose comme ceci:

box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f; 

Toutefois, Cela ne fonctionne pas parce que le compilateur croit que je suis en train de passer le mixin 3 arguments. box-shadow prend un nombre variable d'séparées par des virgules bits, donc je ne peux pas il suffit de définir un mixin comme box-shadow($1,$2,$3).

J'ai essayé en passant

@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

et il a compilé, mais n'a pas fait de rendre les styles.

Des conseils sur la façon de résoudre ce problème?

Answer 1

La Variable D'Arguments

Parfois, il est logique pour un mixin de prendre un nombre indéterminé d'arguments. Par exemple, un mixin pour la création de zone d'ombres peut prendre un nombre quelconque d'ombres comme arguments. Pour ces situations, Sass prend en charge "variable d'arguments, qui sont des arguments à la fin d'un mixin déclaration qui prennent tous les restes d'arguments et de les emballer comme une liste. Ces arguments semblent juste comme normal arguments, mais sont suivis par .... Par exemple:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

via: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments

Answer 2

SASS 3.1 ou moins

Remarque: Si vous utilisez SASS 3.2+, utilisez la fonction Arguments variables comme le suggère rzar.

Il suffit d’utiliser une interpolation de chaîne dans le mix même, comme ceci:

 @mixin box-shadow($value) {
  -webkit-box-shadow: #{$value};               // #{} removes the quotation marks that
  -moz-box-shadow: #{$value};                  // cause the CSS to render incorrectly.
  box-shadow: #{$value};
}

// ... calling it with quotations works great ...
@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");
 

Merci pour le tuyau Ryan.

Answer 3

Utiliser une interpolation de chaîne

 @include box-shadow(#{"inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f"});
 

Answer 4

Il y a beaucoup de façons de le faire, le meilleur moyen est d'utiliser un mixin comme suit:

@mixin box-shadow($value...) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}

Et l'inclure comme ceci:

@include box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6));

ou

@mixin box-shadow($value) {
      -webkit-box-shadow: #{$value};               
      -moz-box-shadow: #{$value};          
      box-shadow: #{$value};
}

Et l'inclure comme ceci:

@include box-shadow("inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)");

ou:

@mixin box-shadow($value) {
      $value: unquote($value);
      -webkit-box-shadow: $value;               
      -moz-box-shadow: $value;          
      box-shadow: $value;
}

ou:

@mixin box-shadow($valeur) { -webkit-box-shadow: $valeur;
-moz-box-shadow: $valeur;
box-shadow: $valeur; }

Et l'inclure comme ceci:

@include box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)));

Sass est très puissant :)

Answer 5

Je tiens à souligner que vous pouvez également transmettre une valeur en utilisant le nom de l'argument lorsque vous appelez le mixin:

 @mixin shadow($shadow: 0 0 2px #000) {
    box-shadow: $shadow;
    -webkit-box-shadow: $shadow; 
    -moz-box-shadow: $shadow; 
}

.my-shadow {
  @include shadow($shadow: 0 0 5px #900, 0 2px 2px #000);
}
 

notez que scss est limité afin que $shadow conserve sa valeur de mixin si elle est réutilisée ultérieurement. moins je crois, souffre de réaffectation dans ce scénario