css - 带循环的 sass mixins 给出错误

Question

我正在编写一个 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%);

但是我遇到了错误。谁能告诉我为什么？

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