如何在twitter-bootstrap中应用navbar-inverse的CSS

Lor*_*ard 7 javascript css less twitter-bootstrap

通过使用twitter-bootstrap 可以通过添加来修改导航栏的外观.navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>
Run Code Online (Sandbox Code Playgroud)

我想要做的是一个简单的js模块来改变网站的主题.
我的脚本只能将一个类添加到正文选择器,然后所有内容都由less文件生成.

$('body').addClass('theme-dark');
Run Code Online (Sandbox Code Playgroud)

通过使用js代码,很容易获得结果.

$('.navbar').addClass('navbar-inverse');
Run Code Online (Sandbox Code Playgroud)

但我的问题是不同的:
只有将newTheme类添加到body选择器才能应用navbar-inverse,更改较少的文件?
如果是,我应该如何编写较少的规则?

我想做这样的事情:

.theme-dark {
    .navbar {
       // a function which makes
       // the style of navbar-inverse
Run Code Online (Sandbox Code Playgroud)

要求:

我使用较少的css,jquery和下划线.

小智 5

LESS提供了在其他上下文中使用先前定义的类作为mixins的能力.试试这个:

.theme-dark {
    .navbar {
        .navbar-inverse;
    }
}
Run Code Online (Sandbox Code Playgroud)