由于 CSS 自定义属性而导致 Sass 中断？

Question

假设你有一个颜色的 CSS 自定义属性：

--color: 255,0,0

并且您希望每次都根据需要rgb或rgba根据需要专门混合它。这是有效的 CSS：

rgba(var(--color), .3)

...但是Sass 爆炸了。我一直试图看看我是否可以编写一个 mixin 或其他东西，但我无法弄清楚如何解决 Sass 坚持使用它自己的颜色函数的问题，即使它们不是必需的。

Answer 1

知道了！这有点 hacky，但这允许您创建一个自定义函数，该rgba()函数利用具有 CSS 自定义属性的函数（在规范中允许）：

@function swatch($swatch-color, $swatch-alpha:1) {
  @return unquote("rgba(var(--#{$swatch-color}), #{$swatch-alpha})");
}
:root {
  --green: 0,255,0;
}
.green { color: swatch(green, .1); }

在Sass 错误报告中找到了解决方案的关键。这只有效，因为取消引用和插值绕过了默认rgba()函数。