Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to apply the CSS of navbar-inverse in twitter-bootstrap

By using twitter-bootstrap It will be possible to modify the look of the navbar by adding .navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

What I am trying to do is a simple js module to change the theme of the web site.
My script is just able to add a class to the body selector and then everything is made by the less file.

$('body').addClass('theme-dark');

By using js code it is quite easy to obtain the result.

$('.navbar').addClass('navbar-inverse');

But my question is different:
will it be possible just by adding the newTheme class to body selector to apply the navbar-inverse, changing the less file?
If yes how should I write the less rule?

I would like to make something like this:

.theme-dark {
    .navbar {
       // a function which makes
       // the style of navbar-inverse

Requirements:

I am using less for css, jquery and underscore.

like image 885
Lorraine Bernard Avatar asked Oct 15 '12 10:10

Lorraine Bernard


1 Answers

LESS provides the ability to use previously defined classes as mixins in other contexts. Try this:

.theme-dark {
    .navbar {
        .navbar-inverse;
    }
}
like image 127
Liluakip Avatar answered Sep 24 '22 15:09

Liluakip