sass mixins循環givies錯誤

Question

我正在寫一個sass代碼來獲得如下給出的css輸出。

background: -webkit-linear-gradient(top, 50%); 
background: -moz-linear-gradient(top, 50%); 
background: linear-gradient(top, 50%); 

的青菜混入代碼我寫的是這樣的：

@mixin linear-gradient($name, $arg1, $arg2){ 
    @each $vendor in ('-webkit-', '-moz-','') { 
     background: #{$vendor}#{$name}(#{$arg1}, #{$arg2}); 
    } 
} 
@include linear-gradient(linear-gradient, top, 50%); 

但我得到錯誤。誰能說出原因？

Answer 1

$name參數似乎不必要，所以我從第一個例子中省略了它。第二個例子顯示了一個使用$name的替代解決方案，以便正確編譯括號。

@mixin linear-gradient($arg1, $arg2){ 
    @each $vendor in ('-webkit-', '-moz-','') { 
     background: #{$vendor}linear-gradient(#{$arg1}, #{$arg2}); 
    } 
} 

@mixin linear-gradient($name, $arg1, $arg2){ 
    @each $vendor in ('-webkit-', '-moz-','') { 
     background: #{$vendor}$name+'('+$arg1+', '+$arg2+')'; 
    } 
} 

#myElement { 
    @include linear-gradient(top, 50%); 
} 

/* Output */ 

#myElement { 
    background: -webkit-linear-gradient(top, 50%); 
    background: -moz-linear-gradient(top, 50%); 
    background: linear-gradient(top, 50%); 
}