Непосредственный детский селектор в МЕНЬШЕ
В любом случае, чтобы 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;}
}
это помогает уменьшить объявления классов, когда они не нужны.