Css 带循环的sass混合givies错误

我正在编写一个sass代码来获得css输出，如下所示

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

我为此编写的sass mixin代码是：

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

---

但我犯了个错误。有人能告诉我原因吗？

参数

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

---

$name代表“线性渐变”样式。请参阅编辑后的问题。我得到的输出是背景：-webkit linear gradienttop，50%@das我已经更新了我的答案，以提供一个替代解决方案，该解决方案在编译括号时不会省略

$name

参数。您连接“（”使用“+”的想法很有帮助。我可以这样做，但有一点变化，如下所示。