使用 SCSS 时如何在 rgba 值中使用"no commas"和"css custom properities"？

Question

I"m试图在rgba值中使用CSS自定义属性。我可以在纯css中获得所需的结果，但当我在codepen.io或我的IDE中测试这一点时，我会得到一个错误：overloaded function `rgba` given wrong number of arguments。我如何将其纳入SCSS

这是一个显示错误的代码笔：https://codepen.io/tmocodes/pen/xxVdMEq?editors=1100下面的代码段之所以有效，是因为它没有使用SCSS。

:root {
--color-primary: 29 4 247;
--lighten: 10%;
}
#element {
background-color: rgba(var(--color-primary) / var(--lighten));
color: rgb(var(--color-primary));
}

<h1 id="element">Using CSS Custom Properities with opacity</h1>

Answer 1

为了将现代无逗号CSS颜色语法与SCSS结合起来，我使用了这个解决方法。

这不起作用的原因是它与Sass rgb/rgba函数冲突。您可以将一个或多个字母大写，使Sass忽略它(区分大小写(。CodePen演示。

$color-primary: 29 4 247;
$color-secondary: 247 4 4;
$lighten: 10%;
#element {
background-color: Rgba($color-primary / $lighten);
color: Rgb($color-primary);
}
#element-2 {
background-color: Rgba($color-secondary / $lighten);
color: Rgb($color-secondary);
}

Answer 2

SCSS预处理器必须先计算值，然后才能将其分配给css变量。下面的方法可能会提示您使用您正在寻找的解决方案。

rgba需要4个参数

CCD_ 3需要3个参数。

$blue: rgb(29, 4, 247);
$red: rgb(29, 4, 247);
$lighten: 10%;
:root {
--color-primary: #{blue};
--color-secondary: #{red};
--lighten: #{lighten};
}

#element {
background-color: lighten($blue, $lighten);
color: $blue;
}
#element-2 {
background-color: lighten($red, $lighten);
color: $red;
}

我创建了以下CodePen，它给出了如何将scs与css变量相结合的想法。