Кто-нибудь знает, почему LESS вставляет пробел между селектором и его псевдоклассом? - PullRequest
Новая
       18

Кто-нибудь знает, почему LESS вставляет пробел между селектором и его псевдоклассом?

0 голосов
/ 20 марта 2019

В основном у меня есть следующие Less для стилизации таблицы, и я использую псевдо-классы для управления шириной столбцов. 

   .Inbound th {
        &:nth-child(-n+3),:nth-child(5),:nth-child(8){
            width: 10%;
        }
        &:nth-child(4) {
            width: 20%;
        }
        &:nth-child(n+6):nth-child(-n+7) {
            width: 5%;
        }
    }

Это приводит к: 

.Inbound th:nth-child(-n+3),
.Inbound th :nth-child(5),
.Inbound th :nth-child(8) {
  width: 10%;
}
.Inbound th:nth-child(4) {
  width: 20%;
}
.Inbound th:nth-child(n+6):nth-child(-n+7) {
  width: 5%;
}

Что неверно, обратите внимание на пробел в строках 2 и 3 после селектора th и до псевдокласса nth-child .

Если он не должен этого делать, то я обнаружил ошибку в LESS.

Если это правильное поведение, а это не то, чего нужно, может кто-нибудь указать мне, чтоЯ должен делать?

Я уже пробовал следующее:

  • Помещение всех псевдоклассов n-го ребенка в отдельные строки.
  • Выравнивание по левому краю ",Псевдоклассы «&»: nth-child », расположенные далеко слева.

Ни один из них не оказал никакого влияния.

Если это представляет какой-либо интерес, я использую WinLess для предварительной обработкиМеньше для меня, и он использует 2.1.2 LESS.js для разбора.

1 Ответ

2 голосов
/ 20 марта 2019

Он делает именно то, что вы говорите. Есть три вещи, которые, как вы говорите, должны быть под .Inbound th; первый из них &:nth-child(-n+3), второй :nth-child(5), третий :nth-child(8). & - это магия, которая вставляет суперселектор в суперселектор, а не делает его селектором-потомком, соединяя два с помощью пробела, и он есть только у первого. Меньше не пытается быть умным и выяснить, что такое псевдоселектор, а что нет. Это позволяет вам делать некоторые изящные трюки, подобные этому, когда подселектор вообще не является псевдоселектором: 

.foo {
  &--bar { // turns into `.foo--bar`

Или даже это (но, пожалуйста, никогда не используйте это безумие): 

t {
  &able { color: black } // turns into `table`
  &d { color: pink }     // turns into `th`
  &h { color: grey }     // turns into `td`
  sec&ion { color: white } // turns into `section`
}

То, что вы хотите, скорее всего 

.Inbound th {
  &:nth-child(-n+3), &:nth-child(5), &:nth-child(8) {
    ...
...