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

Question

假设您有 CSS 自定义属性颜色：

--color: 255,0,0

而且你想每次都根据需要将它与 rgb 或 rgba 特别混合。这是有效的 CSS:

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

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

Answer 1

也许使用 interpolation rgba(#{--color}, .3)?

Answer 2

rgba(var(--color), .3) 无效：

div {
  width: 50px;
  height: 20px;
  outline: 1px dashed black;
}

:root {
  --color: red;
}

#correct {
  background: var(--color);
}

#incorrect {
  background: rgba(var(--color), .3);
}

<div id="correct"></div>
<div id="incorrect"></div>

Answer 3

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

@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 bug report中找到了解题的关键。这只有效，因为取消引用和插值绕过了默认的 rgba() 函数。

Answer 4

另一个临时解决方法是仅在您的变量中使用 RGB 值，就像您已经这样做的那样：

--color: 255, 255, 255;

然后，如果您将 RGB 或 RGBA 函数与 capitals 一起使用，SASS 将忽略它并且普通 CSS 能够解析它。然后您可以调整不透明度！

RGB(var(--color));
RGBA(var(--color), .3);

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

Sass breaking due to CSS custom properties?

css

sass

mixins

css-variables