假设您有颜色的 CSS 自定义属性:
--color: 255,0,0
并且您希望每次都特别混合它rgb
或rgba
根据需要进行混合。这是有效的 CSS:
rgba(var(--color), .3)
...但是 Sass 爆炸了。我一直在尝试看看我是否可以编写一个 mixin 或其他东西,但我不知道如何绕过 Sass 坚持使用它自己的颜色函数,即使它们不是必需的。
假设您有颜色的 CSS 自定义属性:
--color: 255,0,0
并且您希望每次都特别混合它rgb
或rgba
根据需要进行混合。这是有效的 CSS:
rgba(var(--color), .3)
...但是 Sass 爆炸了。我一直在尝试看看我是否可以编写一个 mixin 或其他东西,但我不知道如何绕过 Sass 坚持使用它自己的颜色函数,即使它们不是必需的。
知道了!这有点 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()
功能。
也许使用插值 rgba(#{--color}, .3)
?
另一个临时解决方法是仅在您的变量中使用 RGB 值,就像您已经:
--color: 255, 255, 255;
然后,如果您使用带有大写字母的 RGB 或 RGBA 函数,SASS 将忽略它并且纯 CSS 能够解析它。然后你可以调整不透明度!
RGB(var(--color));
RGBA(var(--color), .3);
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>