Attempts and fails to convert CSS Variables in SASS file

[rezalas]

Installed product versions

• Visual Studio: 2019 Community
• This extension: 1.12.394 w/ Web Essentials 2019

Description

I have a number of CSS variables I'd like to utilize in my SASS files to make theming more adaptable. However, when I place CSS variables into my SASS files Web Compiler attempts to change them into SASS variables and then shows invalid errors

Steps to recreate

Create a test.scss file with the following contents.

html {
    --hue: 210;
    --background: hsl(var(--hue), 20%, 12%);
}

.testClass {
    background: var(--background);
}

Current behavior

When saved, this will throw an invalid number error: argument $hue of hsl($hue, $saturation, $lightness) must be a number.

Expected behavior

CSS variables should be passed through cleanly to the output .css file without being converted to or processed as SASS. Alternatively, a compiler option to enable CSS variable pass-through for SASS would be sufficient.

[rezalas]

Digging further into this, it appears to be related to an issue with the version of the node module node-sass being used. The following open issue shows similar results to what I'm finding, though almost a year and a half later it not being resolved isn't great news.

sass/node-sass#2251

I'll go ahead and close this since it appears to be caused by a dependency, making it available for future people searching the same issue. My solution at this time is to convert from SASS to LESS which appears to handle this properly so far.