1

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));
   ------------------------^

--------------------
Gama11
  • 31,714
  • 9
  • 78
  • 100
enzobruno
  • 115
  • 1
  • 8
  • 1
    This question is answered here: https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable/41265350. The opacity is rendered outside the rgb declarations parens. Which in this case might mean one variable for the rgb and another for the alpha percentage. – Nathaniel Flick Nov 26 '19 at 02:21
  • I have the same issue if I just use RGB. There seems to be no way to tell VS Code Live SASS Compiler to ignore this. – enzobruno Nov 26 '19 at 02:37
  • Have you tried with a less $variable instead of css variable? – Nathaniel Flick Nov 26 '19 at 04:05

1 Answers1

0

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.

Martin
  • 5,714
  • 2
  • 21
  • 41