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

Question

Próbuję utworzyć miks Sass dla przejść. To jest to, co do tej pory miałem.

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

Chcę, aby móc przekazać ją wiele argumentów jak to

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

Niestety, pojawia się następujący błąd

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

Czy istnieje sposób, aby to tak produkuje zrobić następujące dane wyjściowe w css, nadal akceptując niezdefiniowaną liczbę argumentów?

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

Answer 1

Variable Argumenty

Czasami ma to sens dla wstawek podjęcia nieznaną liczbę argumentów. Na przykład mieszanka do tworzenia cieni pudełkowych może przyjmować dowolną liczbę cieni jako argumentów. 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 normalne argumenty, ale są poprzedzone ....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 kompilowany 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; 
} 

Od: SASS official Documentation

Więc w zasadzie wystarczy, aby zmienić swoją deklarację wstawek wyglądać tak:

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

Answer 2

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

Z tego punktu widzenia nie można wykonać nieokreślonej liczby mixinów, ponieważ opiekun Compass również pomaga w utrzymaniu Sass i widać, że zdefiniował maksymalną liczbę 10 oddzielnych argumentów dla swojego mixinu przejścia.

Answer 3

Po wywołaniu wstawek, nazwać tak:

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

z dodatkowym parens. To będzie kluczowe w tym, że chcesz, aby był używany jako pojedynczy argument.

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

Answer 4

Jeśli chcesz wiele argumentów i sprzedawca-prefiksem, jak w scenariuszu odłogowania:

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

Oczekiwany

-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 ten mixin, znalazłem na Meaningless Writing.

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