SASS/SCSS variables to CSS is possible?

Question

When trying to display in CSS the SASS variable that I declared, I don't get the variable itself in the CSS output file, but the value given to the variable.

To be more clear, this is what I get:

SCSS/SASS input

$gray__background: #2d2d2d;

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

body{
  background-color: $gray__background;
}

CSS "output"

:root {
 --gray__background: #2d2d2d;
}

body{
 background-color: #2d2d2d;
}

That's what I was expecting to get:

CSS "output"

:root {
  --gray__background: #2d2d2d;
}
body{
  background-color: var(--gray__background);
}

Short story: I want to know if the result in the CSS "auto generated" file background-color: var(--gray__background); , instead of background-color: #2d2d2d; is possible to achieve.

I use the Live Sass Compiler extension for VSCode.

Sorry if my question is a little bit vague. I'm new to coding.

Answer 1

The :root variables are being declared in the SCSS, but are not being used, so they wouldn't show up on the CSS output. It looks like you'll have to use --gray__background in the SCSS rather than $gray__background so it becomes: background-color: var(--gray__background); .

Hope this helps.