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?
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
Although the above answers work. There is another workaround.
Solution:
rgb(0 0 0 / 8%) -> RGB(0 0 0 / 8%)You can use rgb that's why this error is coming....
Example:
box-shadow: 0 1px 4px 0 #0000001a;
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