5

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

--color: 255,0,0

并且您希望每次都特别混合它rgbrgba根据需要进行混合。这是有效的 CSS:

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

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

4

4 回答 4

6

知道了!这有点 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()功能。

于 2017-04-29T00:48:45.290 回答
3

也许使用插值 rgba(#{--color}, .3)

于 2017-04-27T21:09:11.127 回答
2

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

--color: 255, 255, 255;

然后,如果您使用带有大写字母的 RGB 或 RGBA 函数,SASS 将忽略它并且纯 CSS 能够解析它。然后你可以调整不透明度!

RGB(var(--color));
RGBA(var(--color), .3);
于 2019-01-22T21:37:21.430 回答
-1

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>

于 2017-04-27T21:17:10.440 回答