Sass @mixin可以接受不定數量的參數嗎？

Question

我正在嘗試爲轉換創建一個sass mixin。這是我迄今爲止所擁有的。

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

我希望能夠將它傳遞多個參數，這樣

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

不幸的是，我得到以下錯誤

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

有沒有辦法做到這一點，因此產生以下輸出在CSS仍然接受未定義數量的參數？

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

Answer 1

變參數

有時是有意義的一個mixin採取未知數量的參數。例如，用於創建框陰影的混合可能會將任意數量的陰影作爲參數。對於這些情況，Sass支持「可變參數」，它是在mixin聲明結束時的參數，它將所有剩餘的參數作爲列表打包。這些參數看起來就像普通的參數，但後面跟着...。例如：

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

被編譯爲：

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

來源：SASS official Documentation

所以你基本上只需要改變你的混入聲明是這樣的：

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

Answer 2

指南針有一個過渡混合，你可以看看（或者你可以只使用指南針）。你可以在這裏更好地看看它：http://beta.compass-style.org/reference/compass/css3/transition/。

通過它的外觀，你不能做一個不定數量的mixins，因爲Compass的維護者也有助於維護Sass，你可以看到他爲他的轉換mixin定義了10個獨立參數的最大數量。

Answer 3

當你調用混入，這樣稱呼它：

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

，具有額外的括號。這將關鍵在於您希望將其用作單個參數。

編輯：如果使用Sass 3.2或更高版本，請參閱上面Jeremie Parker的回答。在3.2中加入實時可變參數：http://chriseppstein.github.io/blog/2012/08/23/sass-3-2-is-released

Answer 4

如果你想要多個參數和廠商前綴，像休耕場景：

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

預計

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

我建議你這個密新，我就發現Meaningless Writing。

代碼

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