更少的多个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;
}