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

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?

css


Solution 1:[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

Solution 2:[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

Solution 3:[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%)

Solution 4:[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. cache cleaned npm
  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

Solution 5:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2 Dan Mullin
Solution 3 dpacman
Solution 4 Skipper pk
Solution 5 JGallardo

Related Questions