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