1

我正在尝试在 rgba 值中使用 CSS 自定义属性。我能够在纯 css 中获得所需的结果，但是当我在 codepen.io 或我的 IDE 中都使用 scss 进行测试时，我得到了一个错误of: 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>

4

2 回答 2

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);
}
于 2020-09-02T17:14:13.947 回答
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 变量结合起来的想法。

于 2020-09-02T17:07:42.157 回答