Расширить иконки Fontello

Question

Я пытаюсь расширить псевдоклассы значков, сгенерированные Fontello, меньше.

Теперь пока это работает:

.icon-extended:before:extend(.icon-caret-n:before) {}

Это не:

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

Не понимаю почему?

li:before в этом случае получит определение контента от .icon-ok:before, но не общие стили от [class^="icon-"]:before, [class*=" icon-"]:before,

Похоже, ошибка для меня?

Answer 1

Ваш первый случай...

.icon-extended:before:extend(.icon-caret-n:before) {}

... вы расширяете то, что имеет сам класс с именем .icon-extended так что класс также соответствует селекторам [class^="icon-"], [class*=" icon-"]таким образом, почему это работает (это не имеет ничего общего с :extend в этом случае).

Ваш второй случай...

ul.checked li:before:extend(.icon-ok:before) {color: #4fa33b;}

... вы расширяете то, что не имеет icon- значение отмечено в его селекторе ul.checked liи так не будет и не должно совпадать [class^="icon-"], [class*=" icon-"], Теперь ваше расширение не меняет имя класса, а просто добавляет селектор в блок кода, определяющий .icon-ok:before (и только этот блок кода). Расширение LESS смотрит только на строку селектора .icon-ok:before и не "умный", зная, что такой селектор будет соответствовать другим строкам селектора [class^="icon-"], [class*=" icon-"] (это, по сути, то, о чем говорил комментарий семи фаз-макс). Так что вы должны сделать это явно, вероятно, лучше всего так:

ul.checked li:before:extend(
  .icon-ok:before,
  [class^="icon-"]:before,
  [class*=" icon-"]:before) {
    color: #4fa33b;
}