web-dev-qa-db-fra.com

Un sass @mixin peut-il accepter un nombre non défini d'arguments?

J'essaie de créer un sass mixin pour les transitions. C'est ce que j'ai jusqu'ici.

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

Je veux pouvoir passer de multiples arguments comme celui-ci

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

Malheureusement, j'obtiens l'erreur suivante

Syntax error: Mixin transition takes 1 argument but 2 were passed.

Y a-t-il un moyen de faire cela pour que la sortie suivante soit générée en CSS tout en acceptant un nombre indéfini d'arguments?

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

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);
}

est compilé pour:

.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 du SASS

Il vous suffit donc de changer votre déclaration de mixins pour ressembler à ceci:

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var
56
Jérémie Parker

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

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

Avec les parens supplémentaires. Cela contribuera de manière décisive au fait que vous voulez que cela soit utilisé comme un seul argument.

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

37
Joseph Erickson

Si vous voulez plusieurs arguments et préfixe du 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 ceci Mixin , j’ai trouvé sur Une écriture sans signification .

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;
}
3
Simon Arnold

Compass a un mix de transition que vous pouvez consulter (ou vous pouvez simplement utiliser Compass). Vous pouvez en prendre un meilleur aperçu ici: http://beta.compass-style.org/reference/compass/css3/transition/ .

En apparence, vous ne pouvez pas créer un nombre indéfini de mixins, car le responsable de Compass aide également à maintenir Sass et vous pouvez constater qu'il a défini un nombre maximal de 10 arguments distincts pour son mixin de transition.

0
nheinrich