Czy sass @mixin może przyjmować nieokreśloną liczbę argumentów?

Próbuję stworzyć sass mixin dla przejść. To jest to, co mam do tej pory.

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

Chcę być w stanie przekazać wiele takich argumentów 

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

Niestety, dostaję następujący błąd 

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

Czy istnieje sposób, aby to zrobić, aby generował następujące wyjście w css, akceptując wciąż nieokreśloną liczbę argumentów?

-webkit-transition: color .5s linear, width .5s linear;
transition: color .5s linear, width .5s linear;
Author: Ryan, 2011-10-26
Source

4 answers

Zmienne Argumenty

Czasami sensowne jest, aby mixin pobierał nieznaną liczbę argumentów. Na przykład mixin do tworzenia cieni może przyjmować dowolną liczbę cieni jako argumenty. W takich sytuacjach Sass obsługuje "zmienne argumenty", które są argumentami na końcu deklaracji mixin, które pobierają wszystkie pozostałe argumenty i pakują je jako listę. Argumenty te wyglądają jak zwykłe argumenty, ale po nich następuje .... Na przykład: 

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

Jest skompilowana do: 

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

From: Sass official Documentation

Więc w zasadzie wystarczy zmienić deklarację mixins, aby wyglądała tak: 

@mixin transition($var...)
  -webkit-transition: $var
  transition: $var
 56
Author: Jérémie Parker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-24 19:22:37

Kiedy nazywasz mixin, nazywaj go tak: 

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

Z dodatkowymi parentami. Spowoduje to klucz sass do faktu, że chcesz użyć go jako pojedynczego argumentu.

EDIT : Zobacz odpowiedź Jeremie Parker powyżej, jeśli używasz Sass 3.2 lub nowszego. Argumenty zmiennych rzeczywistych zostały dodane w 3.2: http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

 37
Author: Joseph Erickson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-05 15:59:18

W przypadku, gdy chcesz wiele argumentów i vendor-prefixed , jak scenariusz Falling: 

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

Oczekiwane 

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

Proponuję ci to Mixin , znalazłem na } bezsensowne pismo.

Kod 

@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
Author: Simon Arnold,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-05 18:30:00

Compass ma mieszankę przejściową, na którą można spojrzeć (lub po prostu użyć kompasu). Możesz przyjrzeć się temu lepiej tutaj: http://beta.compass-style.org/reference/compass/css3/transition/.

Wygląda na to, że nie możesz wykonać niezdefiniowanej liczby mixinów, ponieważ opiekun Compass pomaga również w utrzymaniu Sass i widać, że zdefiniował maksymalną liczbę 10 oddzielnych argumentów dla swojego przejścia mixin.

 0
Author: nheinrich,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-26 05:16:07