sass - Unable to set SCSS variable to CSS variable?

Question

Consider the following SCSS:

$color-black: #000000;

body {
    --color: $color-black;
}

When it is compiled with node-sass version 4.7.2, it produces following CSS:

body {
    --color: #000000; 
}

When I compile the same SCSS with version 4.8.3 or higher, it produces following:

body {
    --color: $color-black; 
}

What am I missing? I checked release logs, but could not found anything useful. Also, I wonder if this change is genuine why does it have only minor version change? Should it not be a major release?

Also, what is my alternative? Should I use Interpolation?

question from:https://stackoverflow.com/questions/50202991/unable-to-set-scss-variable-to-css-variable

Answer 1

Just use string interpolation:

$color-black: #000000;

body {
    --color: #{$color-black};
}

Apparently the old behaviour is not intended and violated the language specs of SASS:

• CSS variables mixed with SCSS variables don't emit proper CSS in 4.8+
• CSS variables aren't properly compiled
• Assigning SASS variables to CSS Variables (Custom Properties) no longer works