更少的多个CSS类

Question

I am fairly new Less and have been trying to get a jQuery plugin to work with my custom CSS generated via Less. Basically, what I have is the following html generated by a plugin:

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

I am not sure how to structure my Less file in order to generate CSS that matches the above.

I have tried:

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

               ....and so on

but it generates the following CSS:

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

The plain CSS is fairly easy to write :

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

and when I write how do I achieve the above using Less? Is there a simple way to achieve this without using functions or extends?

Answer 1

Nesting elements in less has the result you're describing when adding the & : you specify the selector that uniquely matches with that parent and child class (.classA.classB in CSS ),

to do what you're asking

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

you simply shouldn't nest_

Answer 2

If your goal is to inherit styles of one class by another one, you can use mixins :

.foo() {
    background: #ccc;
}

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

Output CSS:

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