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 {.....}

你根本不应该筑巢_

Answer 2

如果您的目标是继承另一个类的样式，则可以使用mixins：

.foo() {
    background: #ccc;
}

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

输出CSS：

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

带有Less的多个CSS类

2 个答案: