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 bug report中找到解决方案的关键。这只能起作用，因为取消引用和插值会绕过默认的rgba()函数。

Answer 2

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

Answer 3

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

--color: 255, 255, 255;

然后，如果将RGB或RGBA函数与大写字母一起使用，SASS将忽略它，而普通CSS可以解析它。然后您可以调整不透明度！

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

Answer 4

rgba（var（ - color），。3）无效：

＆＃13;

div {
  width: 50px;
  height: 20px;
  outline: 1px dashed black;
}

:root {
  --color: red;
}

#correct {
  background: var(--color);
}

#incorrect {
  background: rgba(var(--color), .3);
}

＆＃13;

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

＆＃13;

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

4 个答案: