Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm implementing a websites style.
For legacy support reasons, I need to support IE11, at least for a while. For workflow and my sanity reasons, I would like to use css variables where possible.
I have looked at this solution , which would generate something that works, but it is quite verbose to use.

My goal is to end up with a hardcoded value, which is overwritten by a CSS variable immediately. This way I can add a default theme for everyone, and different themes (like darkmode) for those browsers that support css variables. Obviously without needing to write all of that myself.

So the idea would be that I can write something like this:

$foo {...?}
:root {
  --foo: red;
:root.dark {
  --foo: black;
  color: $foo;
and it gets transpiled to
:root {
  --foo: red;
:root.dark {
  --foo: black;
  color: red;
  color: var(--foo);
Is this possible with scss? I do not want to add some random npm modules or other third party compilers and transpilers to this project to bloat it.
I know of the possibility of adding a polyfill for IE11 that adds support for CSS variables, but most that I've found so far have some form of unfortunate limitation (plus again, they are third party code that I would prefer to avoid if I can). If there is no nice solution using SCSS, that is probably what I will go with.
                microsoft stopped supporting ie11 so why do you need to support it would be the main question? blogs.windows.com/windowsexperience/2022/06/15/…
– Pete
                Jan 17, 2023 at 9:55
                @Pete legacy reasons unfortunately. Some of our customers still use it and some of our interfacing programs still use it internally. We're in the process of phasing it out of all systems (and convincing customers), but it's a big task that unfortunately is still in progress.
– Plagiatus
                Jan 17, 2023 at 10:41
Define a map with all your colors:
$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);
Loop over the map to create the css custom properties:
@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
Create a mixin to output both the fallback and the value.

I've decided to create a mixin that takes 2 params, the css property and the color you want.
@mixin propertyPlusColorValue($property, $color) {
    #{$property}: map.get($colors, $color);
    #{$property}: var(--#{$color});
Then you can use it like this:
.foobar {
    @include propertyPlusColorValue(color, "blue");
    @include propertyPlusColorValue(background-color, "red")
Full code:
@use "sass:map";
$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);
@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
@mixin propertyPlusColorValue($property, $color) {
    #{$property}: map.get($colors, $color);
    #{$property}: var(--#{$color});
.foobar {
    @include propertyPlusColorValue(color, "blue");
    @include propertyPlusColorValue(background-color, "red")
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.