使用 `rgb(0 0 0 / 15%)` 在 CSS 中出错

Question

我正在检查codecademy.com站点，并且有一个具有以下属性的元素：

box-shadow: inset 0 0 5px rgb(0 0 0 / 15%), 0 0 7px #fff;

看起来这会导致元素周围出现双圈，内圈是白色的，外圈是透明的。

但是，当我尝试在样式表中使用此代码时，出现以下错误：

Error: Function rgb is missing argument $green.
        on line 1260 of common.scss
>>                 box-shadow: inset 0 0 5px rgb(0 0 0 / 15%), 0 0 7px #fff;
   ------------------------------------------^

不确定此错误是关于什么或如何解决它。有任何想法吗？

Answer 1

虽然上面的答案有效。还有另一种解决方法。

解决方案：

• 将其更改为大写： rgb(0 0 0 / 8%) -> RGB(0 0 0 / 8%)

Answer 2

正如 Dan Mulin 所说，sass 还没有赶上新标准，所以不要box-shadow: inset 0 0 5px rgb(0 0 0 / 15%)使用box-shadow: inset 0 0 5px rgba(0, 0, 0 , 0.15) Regards

Answer 3

The new standard is to use three values without commas followed by a slash and the opacity as a percentage. Which looks like this:

/* New Standard for color using rgb (rgba depreacated) */
rgb(0 0 0 / 0%)

/* Old standard for color using rgb and rgba */
rgb(0, 0, 0) 
rgba(0, 0, 0, 0)

Sass hasn't caught up to the standard, so you'll get a compilation error when you try to use the new format.

You can learn more here: https://drafts.csswg.org/css-color/#rgb-functions

Answer 4

我发现这个错误是因为 node sass 弃用警告我必须将 node-sass 卸载到 sass 才能修复它。我按照以下步骤操作：

1. 卸载node_modules
2. npm 缓存清理 -f
3. 删除了 package-lock.json
4. 卸载node-sass //如果已经安装
5. npm 安装node-sass@npm:sass

//使用此命令安装 sass，因为 node-sass 已弃用。
人们会想，为什么这是根本原因呢？大多数问题来自于样式，人们建议将 rgb 更改为 rgba 等，这是处理解决方案的一种方法，但我有一种顺风样式，它被导入到从 node_modules 中提取的样式中。因此，对于永久解决方案，我相信这就像一个魅力

Answer 5

你可以使用 rgb 这就是这个错误出现的原因......

例子：

框阴影：0 1px 4px 0 #0000001a；