Error: Function rgb is missing argument $green in SASS

Question

I am getting an error while writing the CSS file using SCSS
The error is as follows:

Error: Function RGB is missing in argument $green.
       on line 116 of sass/c:\Users\User\Desktop\This PC\style.scss
>>     background-color:RGB(111 197 236 / 49%);

The HTML and SCSS code are mentioned below:

.header-hover:hover{
    background-color: rgb(111 197 236 / 49%);
}

<i class="fa-solid fa-angle-right icon less header-hover"></i>

I had used font awesome to get the icons.

Abbreviation

What version of sass are you using? Some don't support the modern rgb syntax – Pervade

Was able to get around this quickly by using hex color codes. – Elin

Answer 1

sass hasn't yet caught up to the new standard so try to use rgba(111, 197, 236, 0.49); instead of rgb(111 197 236 / 49%)

Veer

Answer 2

If you want to or have to use the new syntax, you can use upper case RGB instead, and sass will ignore it.

.header-hover:hover{
    background-color: RGB(111 197 236 / 49%);
}

This is especially useful when you are using CSS variables you don't control:

.header-hover:hover{
    background-color: RGB(var(--color-blue) / 49%);
}

Spoliation

Answer 3

The issue for me happened when tailwind was trying to be pre-processed by SASS. As SASS gem has not caught up with modern CSS syntax, this syntax throws an error.

I simply removed the preprocessor compression from my staging.rb and production.rb settings. To do so add this line:

config.assets.css_compressor = nil

Source: https://github.com/tailwindlabs/tailwindcss/discussions/6738#discussioncomment-2010199

Dopester

Answer 4

In my case I needed to stop sass from preprocessing my files

Cytaster