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

Question

Как расширить класс 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;
}

Answer 1

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

Опция 1:

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

---

Вариант 2:

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

.dummy{
    color: red;
}
.hello {
  &-world:extend(.dummy) {};
}

.foo:extend(.dummy){
  font-size: 20px;
}

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

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