Est-ce qu'un @mixin sass peut accepter un nombre indéfini d'arguments ?

Question

Je tente de créer un mixin sass pour les transitions. Voici ce que j'ai jusqu'à présent.

@mixin transition($var)
  -webkit-transition: $var;
  transition: $var;

Je veux être capable de lui passer plusieurs arguments comme ceci

@include transition(color .5s linear, width .5s linear)

Malheureusement, je reçois l'erreur suivante

Erreur de syntaxe : Le mixin transition prend 1 argument mais 2 ont été passés.

Existe-t-il un moyen de le faire pour qu'il produise la sortie css suivante tout en acceptant un nombre indéfini d'arguments?

-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;

Answer 1

Arguments Variables

Parfois, il est logique qu'un mixin prenne un nombre inconnu d'arguments. Par exemple, un mixin pour créer des ombres de boîtes pourrait prendre n'importe quel nombre d'ombres comme arguments. Pour ces situations, Sass prend en charge les "arguments variables", qui sont des arguments à la fin d'une déclaration de mixin qui prennent tous les arguments restants et les emballent dans une liste. Ces arguments ressemblent à des 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);
}

est compilé en :

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

De : Documentation officielle de SASS

Donc, vous devez simplement modifier la déclaration de vos mixins pour ressembler à ceci :

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var

Answer 2

Lorsque vous appelez le mixin, appelez-le comme ceci :

@include transition( (couleur .5s linéaire, largeur .5s linéaire) );

Avec des parenthèses supplémentaires. Cela indiquera à Sass que vous voulez utiliser ceci comme un seul argument.

ÉDITER : Voir la réponse de Jeremie Parker ci-dessus si vous utilisez Sass 3.2 ou ultérieur. Les véritables arguments variables ont été ajoutés dans la version 3.2 : http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

Answer 3

Si vous voulez plusieurs arguments et préfixes de vendeur, comme dans le scénario suivant :

@include transition(transform .5s linear, width .5s linear)

Attendu

-webkit-transition: -webkit-transform 0.5s linear, width 0.5s linear;
-moz-transition: -moz-transform 0.5s linear, width 0.5s linear;
-ms-transition: -ms-transform 0.5s linear, width 0.5s linear;
-o-transition: -o-transform 0.5s linear, width 0.5s linear;
transition: transform 0.5s linear, width 0.5s linear;

Je vous suggère ce Mixin, que j'ai trouvé sur Meaningless Writing.

Code

@function prefix($property, $prefixes: (webkit moz o ms)) {
    $vendor-prefixed-properties: transform background-clip background-size;
    $result: ();
    @each $prefix in $prefixes {
       @if index($vendor-prefixed-properties, $property) {
         $property: -#{$prefix}-#{$property}
       }
       $result: append($result, $property);
    }
    @return $result;
}

@function trans-prefix($transition, $prefix: moz) {
    $prefixed: ();
    @each $trans in $transition {
        $prop-name: nth($trans, 1);
        $vendor-prop-name: prefix($prop-name, $prefix);
        $prop-vals: nth($trans, 2);
        $prefixed: append($prefixed, ($vendor-prop-name $prop-vals), comma);
    }

    @return $prefixed;
}

@mixin transition($values...) { 
    $transitions: ();
    @each $declaration in $values {
        $prop: nth($declaration, 1);
        $prop-opts: ();
        $length: length($declaration);
        @for $i from 2 through $length {
            $prop-opts: append($prop-opts, nth($declaration, $i));   
        }
        $trans: ($prop, $prop-opts);
        $transitions: append($transitions, $trans, comma);
    }

    -webkit-transition: trans-prefix($transitions, webkit);
    -moz-transition: trans-prefix($transitions, moz);
    -o-transition: trans-prefix($transitions, o);
    transition: $values;
}

Answer 4

Compass dispose d'un mixin de transition que vous pourriez consulter (ou vous pourriez simplement utiliser Compass). Vous pouvez le regarder de plus près ici : http://beta.compass-style.org/reference/compass/css3/transition/.

Apparemment, vous ne pouvez pas faire un nombre indéfini de mixins car le mainteneur de Compass aide également à maintenir Sass et vous pouvez voir qu'il a défini un nombre maximum de 10 arguments séparés pour son mixin de transition.