Должен ли я использовать `&` при выборе прямых детей с помощью `>`?

Question

При написании меньше, я заметил, что следующие два фрагмента:

A.

.parent-el {
   & > .direct-child { ... }
}

B.

.parent-el {
   > .direct-child { ... }
}

будет производить точно такой же CSS:

.parent-el > .direct-child {
   ...
}

У меня есть несколько вопросов:

• Есть ли различия между A и B ?
• Это намеренно и по замыслу?
• Какой из них мне следует использовать и почему?

Answer 1

Есть ли различия между A и B?

В скомпилированном CSS не будет никакой разницы.& в LESS заменяется внешним селектором в скомпилированном CSS.Таким образом, A - это то же самое, что и:

.parent-el {
    .parent-el > .direct-child { ... }
}

Это, конечно, избыточно и в первую очередь лишает смысла использование LESS.

Является ли это намеренным и умышленным?

На самом деле & не используется, как я полагаю, это было задумано в вашем примере.Хороший пример использования & в LESS будет выглядеть примерно так:

.parent-el {
    // define .parent-el styles
    &__child { 
        // define .parent-el__child styles
    }
}

В вышеприведенном примере & позволяет сократить объявление .parent-el__child.

Какой из них использовать и почему?

Вы должны использовать B .В этом случае использование & является излишним и ненужным.

Answer 2

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

Хотя я получаю меньше кода, когда мы не используем"&" Я предпочитаю использовать его, потому что код чище