Custom properties (--*): CSS variables

[moehoward]

Installed product versions

• Visual Studio: [2022 Community]
• This extension: [example 1.13.4]

Description

Compilation fails when a custom CSS properties uses a variable.

Steps to recreate

1. Create a SCSS file.
2. Create a style within a SCSS file that uses a custom CSS property with a variable.

Current behavior

The "variable name" rather than the "value" gets compiled into the CSS file.

Expected behavior

The CSS should display:
.my-class {
--mdc-theme-primary: #4caf50;
}

But instead displays:
.my-class {
--mdc-theme-primary: $medium-green;
}

[failwyn]

Do you know if this worked on the 2019 version?

also, purely out of curiosity, is there an advantage to using custom properties instead of sass properties?

[moehoward]

It worked perfectly well in VS 2019 (for years).
Hence, I noticed the error when I upgraded.

Go to https://jsonformatter.org/scss-to-css and type:

$var-name: green;
p {
--my-custom-color: $var-name;
}

See the result to the right.
See the result in WebCompiler2019 (a.k.a. WebCompiler)
See the result in WebCompiler2022.

More good info here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Sass has advantages over css and that's the whole point using WebCompiler - right?
:<)

[failwyn]

I'll take a look to see if I can identify what changed during the upgrade, it makes it easier to track down the issue knowing if it worked in 2019.

I was wondering about the mixing of variable types, the custom properties with the sass variables; I haven't used custom properties and was just wondering if I was missing something with them.

[failwyn]

It looks like this was caused by a change to node-sass

sass/node-sass#2627
sass/libsass#2621
https://sass-lang.com/documentation/style-rules/declarations#custom-properties

Can you try the following and let me know if it works?

$var-name: green;
p {
--my-custom-color: #{$var-name};
}

[moehoward]

Pingo that was it!
But dang, they moved my cheese!

So instead of using (which worked in Web Compiler 2019):
$var-name: green;
p {
--my-custom-color: $var-name;
}

I now have to use (in Web Compiler 2022):
$var-name: green;
p {
--my-custom-color: #{$var-name};
}

Well, it's obvious I suck at keeping current with Sass.
https://sass-lang.com/documentation/interpolation

Thanks a Million!

[failwyn]

I hate when they move the cheese!

// I'm not gonna lie, I haven't been keeping current with it either, I should go peruse the documentation to see what I'm missing out on