sass 与循环混合给出错误
sass mixins with loops givies error
我正在编写一个 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%);
}
我正在编写一个 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%);
}