Немедленный выбор ребенка в LESS

Question

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

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

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

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

.panel > .control { ... }

Answer 1

ОБНОВЛЕНИЕ

На самом деле, код в оригинальном вопросе работает нормально.Вы можете просто придерживаться дочернего селектора >.

---

Найден ответ.

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

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

Answer 2

Официальный путь:

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

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

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

Answer 3

Правильный синтаксис будет следующим, в то время как использование & будет здесь избыточным.

.panel{
   > .control{
   }
}

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

Answer 4

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

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

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