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

Question

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

我要谈谈 Bootstrap 网格。

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

       <div class="row">

            <div class="span5">

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

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

换句话说，我的 View 不再干净了……它们充满了实际上仅用于样式设置的 Bootstrap 类。如果我决定改变网格系统，那么我将不得不改变我所有的观点! (恶梦)。这让我们回到了内联样式时代……

因为这是我们提问的论坛，所以这是我的问题:

我可以在不丑化我的 View 的情况下享受 bootstrap 网格(或 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。