如何使用 Bootstrap 和 960.gs 分离样式和 html

Question

我开始使用 Bootstrap，我非常沮丧！而且我也使用 Rails，所以我的理念是尽可能多地组织 Web 实体。

我要谈谈 Bootstrap grid。

Bootstrap 使我们能够使用它们的类将我们的 div 放置在网格中。在我的站点中，我有侧边栏和多个嵌套网格对象。我经常使用缩进（haml - 但我也缩进普通 HTML）和 Bootstrap 方式。这是一个例子：

       <div class="row">

            <div class="span5">

                <div class="row">
                    <div class="span2">
                        <p>
                            hohohohohohoho
                        </p>
                    </div>
                    <div class="span3"> ....

在这里，我有 4 个类只是用于定位。

换句话说，我的视图不再干净了...它们充满了引导类，这些引导类实际上仅用于样式设置。如果我决定改变网格系统，那么我将不得不改变我所有的观点！ （恶梦）。这让我们回到了内联样式时代......

因为这是一个我们提问的论坛，所以这是我的问题：

我可以享受引导网格（或 960.gs 网格）的好处而不会丑化我的观点吗？ 换句话说，我能以某种方式将所有这些样式嵌入到我的 css 中而不显着改变我的 html 吗？

类似：

side-bar{
    color:red;
    span:span_5;
}

Answer 1

使用 SASS[1] 或 LESS[2]（或手写笔，或任何其他 CSS 预处理器）

[1] - http://sass-lang.com/
[2] - http://lesscss.org/

它将完全允许您这样做。网上有很多关于如何用预处理器加星的教程，这对你有很大帮助。您可以在此处阅读预处理器简介（在本例中为 LESS）：http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

---

此外，在我看来，css/html 的完全分离是一个神话。你很少做“改变网格系统”之类的事情，也很少只通过改变 CSS 来重新设计，你总是不得不改变 HTML。