CODEWITHSUNDEEP
htmlcssless
MojoJojo
MojoJojo

Reputation: 4232

Multiple CSS classes with Less

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?

Upvotes: 1

Views: 2038

Answers (2)

Marat Tanalin
Marat Tanalin

Reputation: 14123

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

Upvotes: 1

maioman
maioman

Reputation: 18734

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_

Upvotes: 2

Related Questions