Селектор Immediate Child в LESS

112

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

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

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

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

.panel > .control { ... }

css css-selectors less

— Дэйв
источник

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— 30dot

15

Забавно, но фрагмент вашего вопроса уже был правильным ответом.

— 30dot

@thirtydot Конечно, за исключением того, что это не сработает ... только если вы не удалите пробел или не добавите "&". Я использую less.js. По другим парсерам не могу сказать точно.

— Дэйв

2

Я только что протестировал его, и исходный код из вашего вопроса действительно работает в less.js. Убедитесь

— 30dot

1

Да, мои извинения, это работает как шарм с пространством. +1 для вас. Не знаю, как вчера у меня это не работало часами ... иначе я бы не разместил вопрос.

— Дэйв

144

ОБНОВИТЬ

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

Нашел ответ.

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

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

— Дэйв
источник

4

Я не сомневаюсь, что это ошибка, если она не работает с пробелом, если это специально не задокументировано.

— BoltClock

Это просто обман парсера. Он видит это как единый селектор, так что вы получаете .panel >.control.

— Ricardo Tomasi

Я воспринимаю это как особенность, а не как ошибку. Когда вы используете его таким образом, он становится более последовательным, чем "&". Я думаю, что код будет более понятным, если вы используете «&» только с псевдоклассами, а не с дочерними классами.

— Дэйв

1

Это особенность CSS, которая принимает как div > pи div>p. Последовательность всегда будет использовать пробелы между селекторами (взгляните на сгенерированный CSS).

— Рикардо Томази

Конечно, но меня больше заботила последовательность использования &.

— Дэйв

78

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

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

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

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

— Рикардо Томази
источник

1

Я думаю, что это просто обман парсера (как вы думали о другом ответе). Позволь мне объяснить. Как вы сказали, & всегда относится к текущему (родительскому) селектору. Так что все, что будет после, должно применяться к родителю. И это роль псевдоклассов. Непосредственные дочерние классы больше похожи на дочерние классы **** gasp ****, чем на псевдоклассы. Таким образом, использование просто> более интуитивно и логично.

— Дэйв

6

Как думаете, что правильнее? div > pили div >p? &Комбинатор канонический способ сделать это в LESS, не мои чувства. Ваше объяснение является реторическим. Некоторые люди пишут свой CSS в одну строку ...

— Рикардо Томази

Большинство людей используют LESS, поэтому им не нужно заботиться о фактическом генерируемом CSS. Как бы то ни было, оказывается, что после> можно использовать пробел. Итак, & является избыточным.

— Дэйв

13

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

.panel{
   > .control{
   }
}

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

— сбхарти
источник

1

@JJF без вопросов, потому что это ответ?

— Билл Вудгер,

0

Если вам нужно настроить больше селекторов:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

— Stojsins
источник

-1

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

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

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

— Сет Юнт
источник