CODEWITHSUNDEEP
htmlcssless
Muli Yulzary
Muli Yulzary

Reputation: 2569

Nested class not applied in LESS "function"

Consider this LESS file...

@media screen and (max-width: 1200px){
    .container(100px);
}

@media screen and (max-width: 200px){
    .container(40px);
}

.container(@size){
    margin: 50px;

    div.left{
        background-color: blue;
        font-size: @size;
    }

    div.right{
        background-color: red;
        font-size: @size;
    }
}

And this HTML file:

<div class="container">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

I get the right <div> working perfectly fine, but the left one has no style applied to it... what's wrong here?

Note: I tried > operator, & operator, erasing the div and having .left nothing worked...

Upvotes: 1

Views: 399

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9567

You're running a mixin without a proper selector block.

Try changing your code to this:

@media screen and (max-width: 1200px){
  .container {
    .container(100px);
  }
}

@media screen and (max-width: 200px){
  .container {
    .container(40px);
  }
}

.container(@size){
    margin: 50px;

    div.left{
        background-color: blue;
        font-size: @size;
    }

    div.right{
        background-color: red;
        font-size: @size;
    }
}

Working example

Upvotes: 3

Related Questions