'SASS/SCSS variables to CSS is possible?

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.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source