more nested less rules for bootstrap - navs

Created by: ArturKwiatkowski

Whenever making a website and implementing bootstrap we're forced to add a ton of classes to our html markup if we want to ex. change unordered list into pills or tabs. Even if we use less version and compile everything we still need to add extra classes to our markup - and I think here's a place for more nested less files.

As much as it is possible we should be able to use LESS power and leave our markup as semantic as it can only be but folks who are starting to use bootstrap or people who are in a furious rush should be able to use classes as they are now.

Let's say you have and unordered list:

<section id="top">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</section>

Now in your LESS stylesheet you can do:

#section {
  ul {
    .nav;
    .nav-tabs;
  }
}

And you'll get same result like you would type class="nav nav-tabs"

#section {
  ul {
    .nav;
    .nav-pills;
  }
}

And you'll get same result like you would type class="nav nav-pills"

#section {
  ul {
    .nav;
    .nav-pills;
    .nav-stacked;
  }
}

And you'll get same result like you would type class="nav nav-pills nav-stacked"

#section {
  ul {
    .nav;
    .nav-tabs;
    .nav-justified;
  }
}

And you'll get same result like you would type class="nav nav-tabs nav-justified"

#section {
  ul {
    .nav;
    .nav-pills;
    .nav-justified;
  }
}

And you'll get same result like you would type class="nav nav-pills nav-justified"

As you can see the benefit of more nested rules in the LESS files is obvious - we dont need to touch our html markup to style an element (nav in this case).

Please say what you think about such changes and if's that a good direction for extending bootstrap.

Tested on: Firefox 20.0.1, Chrome 26.0.1410.64 m, Internet Explorer 10.0.9200.16521