告訴大家一個(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 要語(yǔ)義化富稻。
在 框架式 的用法中, 博客的邊欄被賦予了一個(gè)叫做 col-4 的 class, 這就不是語(yǔ)義化的。
因?yàn)?col-4 表達(dá)的是外觀的信息, 表示這個(gè)元素占用的寬度是4白胀。 這就不是語(yǔ)義化的椭赋。
markup 應(yīng)該表示的是元素的功能, 而不是外觀。
而使用 sass 的 mixin, 就可以實(shí)現(xiàn)語(yǔ)義化纹笼。 比如你有一個(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 變得更加靈活和抽象枢冤。
