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

【问题标题】：Sass breaking due to CSS custom properties?由于 CSS 自定义属性而导致 Sass 中断？
【发布时间】：2019-01-24 07:15:09
【问题描述】：

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

--color: 255,0,0

并且您希望每次都根据需要将其与rgb 或rgba 混合使用。这是有效的 CSS：

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

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

【问题讨论】：

对于添加的上下文，我知道它在定义变量的方式中明确必须是三位数。我已经在 vanilla CSS 中对此进行了测试，它可以工作。这似乎是 Sass 尚不知道如何处理自定义属性的错误。

标签： css sass mixins css-variables

【解决方案1】：

知道了！这有点 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() 函数。

【讨论】：

【解决方案2】：

也许使用interpolationrgba(#{--color}, .3)？

【讨论】：

返回错误：Error: argument $color` of rgba($color, $alpha) must be a color`

【解决方案3】：

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

--color: 255, 255, 255;

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

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

【讨论】：

【解决方案4】：

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>

【讨论】：

--color: red; 会使其无效。注意我是如何使用--color: 255,0,0;的。
这适用于纯 CSS: :root { --color: 255,0,0; } div { 背景颜色：rgba(var(--color), .3); }