Непосредственный детский селектор в МЕНЬШЕ

В любом случае, чтобы LESS применял непосредственный дочерний селектор ( > ) в своем выходе?

В моем стиле. Я хочу написать что-то вроде:

.panel {
    ...
    > .control {
        ...
    }
}

и LESS генерируют что-то вроде:

.panel > .control { ... }

Ответ 1

UPDATE

Собственно, код в исходном вопросе отлично работает. Вы можете просто использовать дочерний селектор >.

Нашел ответ.

.panel {
    ...
    >.control {
        ...
    }
}

Обратите внимание на недостаток места между " > " и ".", иначе это не сработает.

Ответ 2

Официальный способ:

.panel {
  & > .control {
    ...
  }
}

& всегда относится к селектору тока.

См. http://lesscss.org/features/#features-overview-feature-nested-rules

Ответ 3

Правильный синтаксис будет следовать при использовании '&' здесь было бы излишним.

.panel{
   > .control{
   }
}

Согласно меньше рекомендаций, '&' используется для параметризации предков (но здесь нет такой необходимости). В этот меньше пример, &: hover имеет важное значение: hover в противном случае это приведет к синтаксической ошибке. Однако нет такого синтаксического требования для использования '&' Вот. В противном случае для всех вложений потребуется '&' поскольку они в основном относятся к родительскому.

Ответ 4

Кроме того, если вы нацеливаете первый дочерний элемент, например первый <td> для <tr>, вы можете использовать что-то вроде этого:

tr {
    & > td:first-child {font-weight:bold;}
}

это помогает уменьшить объявления классов, когда они не нужны.