web-dev-qa-db-fra.com

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

J'aime faire des mixins avec SASS qui m'aident à établir une bonne compatibilité entre navigateurs. Je veux faire un mixin qui ressemble à ceci:

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

à quoi 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);

avec 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;

Cependant, cela ne fonctionne pas parce que le complice pense que je suis en train de passer les 3 arguments de mixin. box-shadow prend un nombre variable de bits séparés par des virgules, donc je ne peux pas simplement définir un mixin comme box-shadow($1,$2,$3).

J'ai essayé de passer 

@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 réellement rendu les styles.

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

sass
45
Oliver

Arguments variables

Parfois, il est logique pour un mixin de prendre un nombre inconnu d'arguments. Par exemple, une combinaison pour la création d'ombres de boîte peut prendre un nombre quelconque d'ombres en tant qu'arguments. Pour ces situations, Sass prend en charge les «arguments variables», qui sont des arguments à la fin d'une déclaration mixin, qui prennent tous les arguments restants et les conditionnent sous forme de liste. Ces arguments ressemblent aux arguments normaux, mais sont suivis de .... 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

69
rzar

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.

35
Joshua Pinter

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"});
14
Ryan

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é, donc $shadow conservera sa valeur de mixin si elle est utilisée ultérieurement. moins je crois, souffre de réaffectation dans ce scénario

2
Doug Lee

Cela ne compile pas:

+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))

cela compile:

+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)))

C'est-à-dire, ajoutez une parenthèse autour de la liste d'ombres séparées par des virgules et cela devrait fonctionner:

+box-shadow( (myshadow1, myshadow2, ...) )
0
Panagiotis Panagi