Using CSS vars in SCSS throws syntax error (SASS Live Compiler)

Question

I'm trying to apply CSS variables to my RBG/RGBA but my VS Code Live SASS compiler throws a syntax error telling me I did not provide adequate arguments. Is there a work around for this?

CSS

:root {
    --bg-color: 50, 50, 50, 0.5;
}

.container {
    background: rgba(var(--bg-color));
}

VS Code Live SASS Compilation error:

--------------------
Compilation Error
Error: overloaded function `rgba` given wrong number of arguments
        on line 329 of sass/.../main.scss
>>             background: rgba(var(--bg-color));
   ------------------------^

--------------------

Answer 1

SASS attempts to compile the styles with a SASS-specific rgba() function . However, rgba() is also a native CSS function , so you can use string interpolation to bypass the SASS function.

:root {
    --bg-color: 50, 50, 50, 0.5;
}

.container {
    /* This is valid CSS, but will fail in a scss compilation */
    background: rgba(var(--bg-color));
    
    /* This is valid scss, and will generate the CSS above */
    background: #{'rgba(var(--bg-color))'};
}

Taken from this answer on SO .