Как расширить class / mixin, который имеет динамически сформированный селектор

Как расширить class Less, который динамически формируется с помощью & combinator?

Меньше, что генерирует ожидаемый результат:

.hello-world { color: red; } .foo { &:extend(.hello-world); font-size: 20px; } 

Ожидаемый вывод CSS:

 .hello-world, .foo { color: red; } .foo { font-size: 20px; } 

Меньше не генерирует ожидаемый результат:

 .hello { &-world { color: red; } } .foo { &:extend(.hello-world); font-size: 20px; } 

Неожиданный вывод CSS:

 .hello-world { color: red; } .foo { font-size: 20px; } 

Расширение динамически сформированного селектора (свободно использующего термин), как это в настоящее время невозможно в Less. Существует открытый запрос функции для поддержки этого. До тех пор, пока он не будет реализован, вот два решения для работы.

Опция 1:

Напишите содержимое .hello и .hello-world в отдельный файл test.less (скажем, test.less ), скомпилируйте его, чтобы получить CSS. Создайте еще один файл для правил .foo , импортируйте скомпилированный CSS как файл (less) .hello-world (с помощью директивы (less) ), а затем расширьте .hello-world как вы изначально планировали.

test.less:

 .hello { &-world { color: red; } } 

продленный rule.less:

 @import (less) "test.css"; .foo { &:extend(.hello-world); font-size: 20px; } 

Скомпилированный CSS:

 .hello-world, .foo { color: red; } .foo { font-size: 20px; } 

Этот метод будет работать, поскольку к моменту test.css файла test.css селектор уже сформирован и больше не является динамическим. Недостатком является то, что ему нужен один дополнительный файл и создает зависимость.


Вариант 2:

Создайте фиктивный селектор с правилами для всех свойств, которые должны применяться как к .hello-world и к .hello-world .foo и расширять его так:

 .dummy{ color: red; } .hello { &-world:extend(.dummy) {}; } .foo:extend(.dummy){ font-size: 20px; } 

Это создает один дополнительный селектор (манекен), но это не большая разница.

Примечание. Добавление комментария в качестве ответа, чтобы не оставить вопрос без ответа, а также потому, что обход, указанный в streamе, связанном с комментариями, не работает для меня как есть.

Давайте будем гением компьютера.