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

Question

我正在尝试在 rgba 值中使用 CSS 自定义属性。我能够在纯 css 中获得所需的结果，但是当我在 [=26= 中进行测试时] 或我的 IDE 都使用 scss，我收到错误：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

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

rgba需要4个参数

rgb需要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，给出了如何将 scss 与 css 变量组合的想法。

Answer 2

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

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

$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);
}

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

How to use "no commas" and "css custom properities" in a rgba value while using SCSS?

css

sass

custom-properties

css-variables