使用自定义 CSS 表清理 Twitter Bootstrap 代码答案

【问题标题】：Cleaning up Twitter Bootstrap code with Custom CSS Sheet使用自定义 CSS 表清理 Twitter Bootstrap 代码
【发布时间】：2014-05-04 05:00:32
【问题描述】：

我刚开始使用 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
 }

目前这似乎对我不起作用，但我想知道我是否可以做类似的事情来分离表示和语义。对不起，如果这是一个愚蠢的问题，而且是一个新手。

【问题讨论】：

css 不是这样写的...试试<div class="customnav navbar navbar-inverse navbar-static-top"></div>
那太笨重了。无论如何在一个类中嵌入多个类。这样我在 html 中的每个部分只使用一个 div 类？

标签： html css twitter-bootstrap twitter

【解决方案1】：

虽然不能这样编写 css，但您可以使用像 less、sass 或 stylus 这样的预处理器。它们实际上会让您在 style.less、style.scss 或 style.styl 中使用您的示例（带有其他类或 mixins 的 .customnav）。

【讨论】：

【解决方案2】：

不幸的是，就像 tzvig 所说，CSS 不能那样工作。幸运的是，我们不必只编写普通的 CSS。 Bootstrap is written with LESS，CSS preprocessor，这使得 CSS（和 Bootstrap，就此而言）更容易接受。尝试编写与 CSS 完全兼容的 LESS（或 SASS），而不是 messing up your HTML 具有大量那些（功能强大，主要是语义）类属性......所以它不像学习一个（另一个）新的语言，更像是添加一些新技巧。祝你好运！

【讨论】：