更少的多個CSS類

Question

我是新來的Less，一直在嘗試讓jQuery插件與通過Less生成的自定義CSS一起使用。 基本上，我所擁有的是由插件生成的以下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

在添加&時，將less嵌套元素會得到您要描述的結果：指定與該父級和子級（CSS中的.classA.classB）唯一匹配的選擇器，

去做你要問的

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

你根本不應該nest_

Answer 2

如果您的目標是將一個類的樣式彼此繼承 ，則可以使用mixins ：

.foo() {
    background: #ccc;
}

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

輸出CSS：

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