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?

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

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