sass mixins 和 css 自定义属性

Question

大家好！

我尝试为 css 自定义属性构建一个 sass mixin，以使工作更容易一些。

我的尝试看起来像这样：

@mixin mixin($value) {
  background: unquote('$')#{$value};
  background: var(--#{$value}, unquote('$')#{$value});
}

输出如下所示：

.example {
  background: $value;
  background: var(--colour, $value);
}

但是 sass 不会将我的 $value 转换为实际的东西。 $value 部分最终出现在我的最终 css 文件中，而这不起作用。

我试图在网上找到一个解决方案，但我要么愚蠢地找到它，要么没有。这里有人知道我做错了什么吗？

Answer 1

我用这个例子试试你的代码：

@mixin mixin($value) {
  background: unquote('$')#{$value};
  background: var(--#{$value}, unquote('$')#{$value});
}

.example {
  @include mixin(colour)
}

它有效。 输出是：

.example {
  background: $colour;
  background: var(--colour, $colour);
}

是你想要的吗？抱歉，我没有添加评论的授权，所以我创建了这个答案。

编辑：您可以像这样创建不同的 mixin：

@mixin mixin($value, $color) {
      background: $color;
      background: var(--#{$value}, $color);
    }

这可以帮助您解决问题吗？