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

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

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

.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;
}

css less less-mixins
person Andrew    schedule 22.07.2014    source источник
comment
Я думаю, что это невозможно в настоящее время. Вы можете проверить эту тему и найти обходной путь, представленный там. .   -  person Harry    schedule 22.07.2014

Ответы (1)


arrow_upward
8
arrow_downward

Подобное расширение динамически формируемого селектора (в широком смысле этого слова) в настоящее время невозможно в 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;
}

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

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

person Harry    schedule 19.10.2014