CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3less
Rafael
Rafael

Reputation: 577

LESS nesting with bootstrap mixins not working

I'm currently messing around with Bootstrap and LESS, and tried to do the following:

LESS:

.class1 {
  .jumbotron;
  div {
    .container();
    color: white;
  }
}

HTML (just the part that matters of course):

<div class="class1">
  <div>
    <h1>Heading</h1>
    <p>Some text</p>
  </div>
</div>

But the .container() mixin refuses to work when in a nest. Note that the text color is indeed white, which indicates the problem is only with Bootstrap mixins. Indeed, if I do this:

.class1 div {
    .container();
    color: white;
}

It works like a charm. But I'm sure LESS isn't supposed to work like that, so any help is much appreciated. Thanks in advance.

Upvotes: 0

Views: 72

Answers (1)

Nadezhda Serafimova
Nadezhda Serafimova

Reputation: 792

.class1 div {
    .container();
    color: white;
}

is working, so the problem comes from your selector or something between the two selectors. Look at .jumbotron; and edit it, so you will resolve the conflict.

Upvotes: 1

Related Questions