Несколько классов CSS с меньшим

Question

Я довольно новый Меньше и пытаюсь получить плагин jQuery для работы с моим пользовательским CSS, созданным с помощью Less. В принципе, то, что у меня есть следующий HTML генерируется плагином:

<div class="classA class B" ....> 
     <div class="classC classD" ....> 
      <div class="classE classF" ....> 
      .......... 

Я не уверен, как структурировать Less файл, чтобы сгенерировать CSS, который соответствует выше.

Я пробовал:

 .classA { 
     ...... 
     &.classB { 
      ..... 
       &.classC { 

       ....and so on 

но он генерирует следующий CSS:

.classA {...} 
.classA.classB {....} /*This does not include the CSS of classA */ 
.classA.classB.classC {.....} /*This does not include CSS of classA or classB*/ 
... 

Простой CSS довольно легко написать:

.classA {.....} 
.classB {.....} 

и когда я пишу Как достичь вышеуказанного, используя Less? Есть ли простой способ достичь этого без использования функций или расширений?

Answer 1

Вложенные элементы меньше есть результат вы описывающую при добавлении &: можно указать селектор, который однозначно соответствует с этим родителем и ребенком класса (.classA.classB в CSS),

делать то, что вы «просите

.classA {.....} 
    .classB {.....} 

вы просто не должны nest_

Answer 2

Если ваша цель состоит в том, чтобы наследовать стили одного класса на другой, вы можете использовать mixins:

.foo() { 
    background: #ccc; 
} 

.bar { 
    .foo; 
    color: #000; 
} 

Выходной CSS:

.bar { 
    background: #ccc; 
    color: #000; 
}