МЕНЬШ LESS для автоматического добавления запасного свойства CSS для IE

Question

Мы представляем темную тему для нашего сайта, которую можно включать и выключать на лету, поэтому мы используем пользовательские свойства CSS.Проблема в том, что мы все еще должны поддерживать IE 11. IE просто не получает темную тему, он останется на светлой теме, это нормально, но это означает, что мы должны продублировать все наши цветовые свойства сейчас:

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

Это связано с тем, что IE 11 будет игнорировать пользовательские свойства CSS и по-прежнему использовать первое найденное свойство.Есть ли способ использовать миксин LESS или что-то еще, чтобы автоматически генерировать эти дубликаты для нас?Просто незначительная вещь, но это избавило бы нас от раздражения.

(Примечание: я знаю, что в IE 11 есть переменные для заполнения CSS-переменных, мы решили не использовать их. Мы едва поддерживаем их как есть,для этого не нужно добавлять полифилл.)

Answer 1

Вы можете использовать миксин для вывода нескольких значений следующим образом:

@red: red;

.color(@val) {
  color: @val;
  color: var(~'--@{val}');
}

p {
  .color(@red);
}

Вывод будет:

p {
  color: red;
  color: var(--red);
}