Getting error in CSS with `rgb(0 0 0 / 15%)`

Question

I was inspecting the codecademy.com site and there is an element with the attribute:

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

It seems that this causes a double circle around the element, the inner circle being white and the outer one transparent.

However, when I try to use this code in my stylesheet, I get the following error:

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;
   ------------------------------------------^

Not sure what this error is about or how to resolve it. Any ideas?

Perrotta

It's scss (sass) not css. That rgb function doesn't look standard either. Impossible to tell if codeacademy has something special going on, but a normal css value would look like rgba(0,0,0,38) I think. Specifically since it's red, green, blue, alpha and it says it can't find the value for $green, maybe you just need to add commas? – Morphology

That space separated syntax is valid as of CSS Colors Level 4 but yes it should be rgba since you've provided an alpha value. – Subtropical

Since that rgb function is not standard, does anyone know how to achieve the same result with standard scss? If you go on codecademy.com, it's the circles around the 1, 2, 3, 4, and 5. – Perrotta

Answer 1

As Dan Mulin stated, sass hasn't yet caught up to the new standard so instead of box-shadow: inset 0 0 5px rgb(0 0 0 / 15%) use box-shadow: inset 0 0 5px rgba(0, 0, 0 , 0.15) Regards

Principium

Changing 15% to 0.15 was also a good point. – Abolition

somehow 0.20 is still giving me an error! any idea? – Rattly

If you are still getting an error, remember to change rgb to rgba. – Teodoor

I had used this 'new' standard in year June, 2021 but all of sudden it has failed today, after one year, to compile. So, I too replaced this 'new' standard with the 'old' standard. – Jodhpurs

Answer 2

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

Schleicher

What if the error comes from third party library css file, that we do not control? :/ – Dilatant

Is there a reason why the new standard would quit working all of a sudden? I was messing with some files, but didn't really change anything that would cause it to stop working. When I change it to the old standard, the line works. – Filiate

Are you referring to the new standard not working in SASS, or in general? – Schleicher

Answer 3

Although the above answers work. There is another workaround.

Solution:

• Change it to UpperCase: rgb(0 0 0 / 8%) -> RGB(0 0 0 / 8%)

Lax

Not downvoting the answer, but i recommend against it. While this may prevent the error mentioned by the author, others will likely get build errors later (happened to me when i attempted using the above code). Just change to rgba(0, 0, 0, 0.8). – Johnette

Answer 4

I found this error because of node sass deprecation warning i had to uninstall node-sass to sass to fix it. I followed the following steps:

1. Uninstall node_modules
2. npm cache clean -f
3. removed package-lock.json
4. uninstall node-sass //if already installed
5. npm install node-sass@npm:sass

//used this command to install sass as node-sass is deprecating.
One would think why this is the root cause? most of the issues is coming from the styles and people were suggesting to change rgb to rgba etc which is one way to handle the solution but i had one of the styles of tailwind that was imported into styles that was getting pulled from node_modules. So for a permanent solution i believe this works like a charm

Hemiplegia

Thanks. This may be the cause for me as well. See my comment on a post above. – Filiate

Answer 5

Quick answer

Change rgb(0 0 0 / 15%) to rgba(0, 0, 0, 0.15)

Notes

Notice changing the rgb to rgba, adding commas between values, and changing percentage to decimal value.

---

See other answers for detailed explanations about legacy code, etc.

Johnette

Answer 6

SASS doesn't support the new color standard. To get around this, I created an alternative RGB function that generates an inline string in the new standard.

THIS:

@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.";
}

Usage:

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

Output:

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

Grosbeak

Answer 7

You can use rgb that's why this error is coming....

Example:

box-shadow: 0 1px 4px 0 #0000001a;

Linville

I'm a little confused: You say, "you can use rgb" but your code example after the four dots just shows hex. – Assai

hmm this is not really clear, you said you can use rgb but you are showing hex instead of rgb – Brothers