0

We're introducing a dark theme for our site that can be turned on and off on the fly, so we're using CSS custom properties. The problem is that we still have to support IE 11. IE just isn't getting the dark theme, it'll stay on the light theme, that's fine, but it means we have to duplicate all of our color properties now:

.some-icon {
  color: @some-font-color;
  color: var(--some-font-color);
  fill: @some-font-color;
  fill: var(--some-font-color);
}

This is because IE 11 will ignore the CSS custom properties and still use the first one it finds. Is there a way to use a LESS mixin or something else to automatically generate those duplicate values for us? Just a minor thing but it would save us some annoyance.

(Side note: I know there are polyfills to make CSS variables work in IE 11, we chose not to use one. We barely support it as is, no need to add a polyfill for this.)

vaindil
  • 7,536
  • 21
  • 68
  • 127

1 Answers1

0

You can use a mixin to output multiple values as such:

@red: red --red;

.color(@val) {
    @val1: extract(@val, 1);
    @val2: extract(@val, 2);
    color: @val1;
    color: var(~'@{val2}');
}

p {
    .color(@red);
}

Output will be:

p {
  color: red;
  color: var(--red);
}
mulsun
  • 563
  • 5
  • 15