Search code examples
htmlcsssasscodepen

My RGB variables are not working on SCSS/SASS

When trying to apply the following to my SCSS:

$main__blue: 130, 207, 236;

:root {
    --main__blue: #{$main__blue};
}

h1{
  color: rgb(var(--main__blue));
}

I get the following error from compiler:

Compilation Error Error: Function rgb is missing argument $green. on line 44 of sass/c:{...}\assets\css\style.scss color: rgb(var(--main__blue));

I don't want to declare the variable as RGB (in which would solve my problem), because I want later on to reuse it as an RGBA.

The strange part is that when applying the same code to my CodePen, it works perfectly.

What am I doing wrong and how can it be solved?

VSCode with Live Sass Compiler extension.

Solution

  • The problem might be related to the VSC Live Sass Compiler.

    Don't use this extension: Live Sass Compiler by Ritwick Dey

    You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension might produce the error you are describing.

    Use this extension: Live Sass Compiler by Glenn Marks

    You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to @ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it.

    Let me know if this is helpful.