Custom properties (--*): CSS variables about webcompiler HOT 6 CLOSED

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?

from webcompiler.

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?
:<)

from webcompiler.

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.

from webcompiler.

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};
}

from webcompiler.

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!

from webcompiler.

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

from webcompiler.