LESS mixin для автоматического добавления альтернативного свойства CSS для IE

Мы представляем темную тему для нашего сайта, которую можно включать и выключать на лету, поэтому мы используем настраиваемые свойства 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 или что-то еще, чтобы автоматически генерировать для нас эти повторяющиеся значения? Незначительная вещь, но это избавит нас от некоторого раздражения.

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


less less-mixins
person vaindil    schedule 26.09.2019    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

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

@red: red;

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

p {
  .color(@red);
}

Вывод будет:

p {
  color: red;
  color: var(--red);
}
person mulsun    schedule 26.09.2019