多个 CSS 类 with Less

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 中的嵌套元素具有您在添加 & 时所描述的结果：您指定的选择器唯一匹配该父子 class (.classA.classB in CSS ),

按照你的要求去做

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

你根本不应该嵌套_

Answer 2

如果您的目标是继承一种class 的样式，您可以使用mixins:

.foo() {
    background: #ccc;
}

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

输出CSS：

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

多个 CSS 类 with Less

Multiple CSS classes with Less

html

css

less