Multiple CSS classes with Less

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?

That's what & does in less. If you want the output to be .classA {.....} .classB {.....} don't use &. The "plain CSS" will work in less. — Ram
– Ram, Commented Mar 8, 2015 at 21:27

maioman · Accepted Answer · 2015-03-08 21:29:18Z

2

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_

answered Mar 8, 2015 at 21:29

maioman

18.8k4 gold badges39 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marat Tanalin · Accepted Answer · 2015-03-08 22:02:26Z

1

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;
}

answered Mar 8, 2015 at 22:02

Marat Tanalin

14.2k1 gold badge38 silver badges53 bronze badges

Collectives™ on Stack Overflow

Multiple CSS classes with Less

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related