使用自定义CSS工作表清理Twitter Bootstrap代码

时间:2014-03-26 01:55:59

标签: html css twitter-bootstrap twitter

我刚刚开始使用Twitter Bootstrap,从你在html中设计网站并且没有分离的意义上看起来非常混乱。我想知道是否有任何方法通过在我自己的自定义类中嵌入引导类来清理它。

例如:

而不是为html中的导航栏执行此操作。

<div class="navbar navbar-inverse navbar-static-top"></div>

我想分别在html和css中做这样的事情。

<div class="customnav"></div>

.customnav {
            .navbar 
            .navbar-inverse 
            .navbar-static-top
 }

目前这似乎对我不起作用,但我想知道我是否可以做类似的事情,以便分离演示和语义。对不起,如果这是一个愚蠢的问题,还有一个新的。

2 个答案:

答案 0 :(得分:3)

虽然css不能以这种方式编写,但您可以使用less,sass或stylus等预处理器。他们实际上会让你在你的style.less,style.scss或style.styl中使用你的例子(.customnav与其他类或mixin)。

答案 1 :(得分:0)

不幸的是,就像tzvig所说的那样,CSS并不像那样。幸运的是,我们不必只写简单的vanilla CSS。 Bootstrap is written with LESS,一个CSS preprocessor,它使CSS(和Bootstrap,就此而言)更容易忍受。尝试编写与{CSS完全兼容的messing up your HTML(或LESS)而不是SASS代替那些(奇妙的功能,主要是语义)类属性...所以它不像学习(另一种)新语言,更像是添加一些新技巧。祝你好运!