在CSS中使用“rgb(0 0 0 / 15%)”时出错

a0x5cqrl  于 2023-01-14  发布在  其他
关注(0)|答案(7)|浏览(494)

我正在检查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;
   ------------------------------------------^

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

zsbz8rwp

zsbz8rwp1#

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

lndjwyie

lndjwyie2#

新的标准是使用三个不带逗号的值,后面跟着一个斜线,不透明度用百分比表示,看起来像这样:

/* 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还没有达到标准,所以当您尝试使用新格式时,会得到一个编译错误。
您可以在这里了解更多信息:https://drafts.csswg.org/css-color/#rgb-functions

nwnhqdif

nwnhqdif3#

尽管上述答案有效,但还有另一种解决方法

    • 解决方案:**
      • 将其更改为大写**:rgb(0 0 0 / 8%) -> RGB(0 0 0 / 8%)
fd3cxomn

fd3cxomn4#

我发现这个错误是因为node sass不推荐使用警告,我必须卸载node-sass到sass来修复它。
1.卸载节点模块
1.npm缓存清理-f
1.已删除程序包锁.json
1.卸载node-sass//(如果已安装)
1.npm安装节点sass @npm:sass
//使用此命令来安装sass,因为node-sass不建议使用。
有人会想为什么这是根本原因?大多数问题来自于样式,人们建议将RGB更改为RGBA等,这是处理解决方案的一种方式,但我有一个从node_modules中提取的样式导入到样式中。因此,对于一个永久的解决方案,我相信这是一个魅力

twh00eeo

twh00eeo5#

    • 快速回答**

rgb(0 0 0 / 15%)更改为rgba(0, 0, 0, 0.15)

    • 说明**

请注意,将rgb更改为rgba,在值之间添加逗号,并将百分比更改为十进制值。

  • 有关遗留代码等的详细说明,请参见其他答案。*
cwdobuhd

cwdobuhd6#

SASS不支持新的颜色标准。为了解决这个问题,我创建了一个替代的RGB函数,它生成一个新标准的内联字符串。
这是:

@function rgb-($color, $alpha: 100%) {
    @if(str-length($color) > 0) {
        @return "rgb(#{$color} / #{$alpha})";
    }
    @error "$color is invalid.";
}

@function rgb--($string) {
    @if(str-length($string) > 0) {
        @return "rgb(#{$string})";
    }
    @error "$string is invalid.";
}

用法:

rgb-(0 0 0, 5%);
rgb--(0 0 0 / 5%);

输出:

rgb(0 0 0 / 5%);
rgb(0 0 0 / 5%);
c3frrgcw

c3frrgcw7#

你可以使用rgb,这就是为什么这个错误来....

  • 示例:*

矩形阴影:0 1像素× 4像素× 0 #0000001a;

相关问题