Question

我创建了一个简单的mixin，它将渐变颜色输入mixin：

@mixin bgGradient($color1, $color2) {
    background-image: linear-gradient(to bottom, $color1 0%, $color2 100%);
}

我正在尝试将mixin调用存储在变量中：

$foo: @include bgGradient(#fff, #000);

但是，尝试这样做时出错：

Invalid CSS after "...foo:": expected expression (e.g. 1px, bold), was "@include bgGrad...")

是否可以将mixin调用存储在变量中？如果是这样，人们如何获得这种力量？我已经浏览过互联网，似乎无法发现这个问题被提及......

Answer 1

只需使用@extend指令。

@mixin bgGradient($color1, $color2) {
  background-image: linear-gradient(to bottom, $color1 0%, $color2 100%);
}

%foo{
  @include bgGradient(#fff, #000);
}

//Example code
.my-div{
  @extend %foo;
}

Sass - 以@include作为值变量

1 个答案: