I am implementing website styling.

For legacy support reasons, I need to support IE11, at least for a while. For workflow and my sanity reasons I want to use css variables whenever possible.

I've looked into this solution and it generates something that works, but is rather verbose to use.

My goal is to end up with a hardcoded value that is immediately overridden by a CSS variable. This way I can add a default theme for everyone, and add a different theme (like dark mode) for those browsers that support css variables. I obviously don't need to write all of this myself.

So my idea is that I could write something like this:

$foo {...?} :root { --foo: red; } :root.dark { --foo: black; } p { color: $foo; }

it is translated to

:root { --foo: red; } :root.dark { --foo: black; } p { color: red; color: var(--foo); }

Can this be achieved using scss? Idon'twant to bloat this project by adding some random npm modules or other 3rd party compilers and transpilers.

I know it's possible to add a polyfill for IE11 to add support for CSS variables, but most of the ones I've found so far have some form of unfortunate limitation (plus, they're 3rd party which I prefer code) avoid if possible). This is the solution I might go for if there is no good solution using SCSS.