告訴大家一個(gè)秘密, 自從有了 SASS 之后, 我們可以有兩種方式來使用 css,
我管它們叫做 類庫(kù)式 和 框架式 。

這里我以 foundation 這個(gè) scss 框架為例, 它和我們熟悉的 bootstrap 類似,
只不過 bootstrap 使用 less 寫的 (bootstrap 3 也改為 SASS 了, foundation 是由 sass 寫的。
foundation 是一個(gè)對(duì) developer 友好的前端框架, 如果說 bootstrap 是一個(gè) ui 庫(kù)的話, foundation 更偏重于成為一個(gè)工具。

如果你對(duì) foundation 不熟的話, 首先看一個(gè)這個(gè)例子。

你會(huì)發(fā)現(xiàn)它的用法和 bootstrap 非常類似, 這就是我剛才所說的 框架式 用法。
這種用法只要是接觸過 bootstrap 的同學(xué)都不會(huì)陌生。它的核心就是 ui 驅(qū)動(dòng), 你需要這個(gè)元素成為什么樣子,
你就把框架提供的 class 的名字賦值給這個(gè)元素。 這就是一般框架的做法, 比如說 rails，我提供一套規(guī)范,
然后你的模型想要能綁定數(shù)據(jù)庫(kù), 那你就繼承 activerecord 類, 你的 controller 要想接收 http 請(qǐng)求,
就要繼承 application_controller。 然后 model 放 model 文件夾下, controller 放 controller 文件夾下。
這就和很多 css 框架提供的 grid （網(wǎng)格） 類似, 每個(gè)元素都必須處于一個(gè) column 之內(nèi), 而 column 需要被 row 所包圍。

其實(shí)還有另外一種用法, 就是 類庫(kù)式, 類庫(kù)和框架的區(qū)別, 其實(shí)一句話就能說明白了。

Frameworks drive you, you drive libs。

foundation 的官方文檔里, 很多組件都有 Semantic Markup With Sass 這一節(jié)。
那什么是 semantic markup 呢? 簡(jiǎn)單來說就是你的 markup 要語義化。
在 框架式 的用法中, 博客的邊欄被賦予了一個(gè)叫做 col-4 的 class, 這就不是語義化的。
因?yàn)?col-4 表達(dá)的是外觀的信息, 表示這個(gè)元素占用的寬度是4。 這就不是語義化的。
markup 應(yīng)該表示的是元素的功能, 而不是外觀。
而使用 sass 的 mixin, 就可以實(shí)現(xiàn)語義化。 比如你有一個(gè)按鈕, class 命名為 fire。
然后你需要加載 foundation 的一個(gè)圓邊的按鈕樣式, 使用框架式的用法那就只能給這個(gè)元素再加上
button radius 這兩個(gè) class 命名。 而使用 類庫(kù)式 那就能這樣寫:

.fire {
    @include button
}

這兩種寫法最終生成的 css 當(dāng)然是有所不同的, 這個(gè)后面來講, 不過至少它們所展現(xiàn)出來的樣式是一致的。
在 html 結(jié)構(gòu)上來說, 類庫(kù)式 更為簡(jiǎn)潔。

上面的那個(gè)例子中，使用 類庫(kù)式 的代碼如下：

@import '../../bower_components/foundation/scss/foundation/components/grid';

.main {
    @include grid-row();
}

.brother {
    @include grid-column(6);
}

點(diǎn)擊查看結(jié)果

搞了半天, 這兩種寫法的區(qū)別就是在 markup 上稍微減少了幾個(gè)字符而已。
事實(shí)不是這么簡(jiǎn)單的。 重點(diǎn)并不是少寫幾個(gè)單詞, 重點(diǎn)是 html 的結(jié)構(gòu)變得更穩(wěn)定了。

現(xiàn)在的 html 結(jié)構(gòu)就變得更加抽象，而把底層實(shí)現(xiàn)更多的交給 css。

這多虧了 scss 的強(qiáng)大，使得 css 變得更加靈活和抽象。