摘要：今天這篇主要講講里關(guān)于樣式開發(fā)的一些前期準(zhǔn)備工作，主要是和。總的來說就不要再用了，又大又笨而且連親爹都準(zhǔn)備放棄它了，未來將是小快靈組件協(xié)同工作的大趨勢，就是可以用來替代的組件庫。

今天這篇主要講講 Ember CLI 里關(guān)于樣式開發(fā)的一些前期準(zhǔn)備工作，主要是 Sass 和 Bootstrap。

Ember Addons 是尋找各種組件的絕佳場所，下文將要介紹的一些都可以在這里找到，沒事的時候多探索一下會有很多驚喜。

Sass 的演變和使用在前端開發(fā)領(lǐng)域真是個又臭又長的話題，如果你是自行搭建構(gòu)建系統(tǒng)你就明白我說的意思了。還好 Ember CLI 的生態(tài)系統(tǒng)比較完備，也有一個廣大的社區(qū)做后盾可以為我們省去很多功夫。

對于 Sass 的基礎(chǔ)使用，我們只需要安裝 |3822741913b0abccece813de6916a2f41| 就好了，它默認(rèn)使用 node-sass，支持 SourceMaps 和 IncludePaths 等功能選項，比較省心。較新的 Ember CLI 應(yīng)該是直接內(nèi)置了 ember-cli-sass 的，推薦升級哦。

對于不太熟悉 Sass 的程序員，IncludePaths 值得一講，我見到有些人啊為了方便的 import，把許多第三方的 sass 文件拷過來拷過去的，其實大可不必哦～就拿 bootstrap-sass 為例好了：

安裝 bootstrap-sass：

$ npm install bootstrap-sass --save

完后呢，入口文件的路徑在 node_modules/bootstrap-sass/assets/stylesheets 這里，因為通常 node_modules/ 和 bower_components/ 這些目錄是不會被包含在項目里的（包含在 Git 或 HTTP Server Root 下），所以才會有手工拷貝到別處的做法。在 Ember CLI 里，你可以這樣設(shè)置一下：

// ember-cli-build.js or Brocfile.js
var app = new EmberApp(defaults, {
    sassOptions: {
        includePaths: [
            "node_modules/bootstrap-sass/assets/stylesheets"
        ]
    }
})

之后在項目的 sass 文件內(nèi)直接 @import "bootstrap"; 就好了，那是一個數(shù)組所以你懂的，你可以設(shè)置很多路徑，sass 在編譯的時候會挨個兒去找。

如果你跟我一樣喜歡 POD 文件結(jié)構(gòu)，那么還有一個 ember-cli-sass-pods 也可以用用，這個東西能讓你這樣生成 sass 文件：

$ ember generate style [name] -p

生成的文件會保存在同名的 POD 目錄下，不過我一向都是手動創(chuàng)建文件的，所以并沒有實際測試它。對于樣式文件在 POD 架構(gòu)下的導(dǎo)入我是這樣做的：

創(chuàng)建 app/styles/_pods.scss 文件

在 app/styles/app.scss 文件里添加一句 @import "pods";

在 includePaths 那里添加 app/pods 這一項

新增加的 PODs 樣式在 app/styles/_pods.scss 內(nèi)這樣引用：`@import "name/style;"

后來我注意到 ember-cli-sass-pods 也是這么做的，英雄所見略同嘛～

前面提到了用 |3822741913b0abccece813de6916a2f415| 來引用 Bootstrap 的方法，不過在 Ember CLI 項目里，我還是推薦你用 ember-cli-bootstrap-sassy 來輔助你做這件事，因為這個 addon 額外做了幾件好事：

添加了 bower 版的 bootstrap-sass，省去了你人工尋找和安裝的過程

完成了 includePaths 的設(shè)置，免得你忘記了

完成了 |3822741913b0abccece813de6916a2f420| 和 腳本文件的導(dǎo)入，好省心吶

Bootstrap 自帶的字體圖標(biāo)可以選擇不導(dǎo)入，JavaScript 的模塊可以選擇性的導(dǎo)入或者完全不要，具體設(shè)置如下所示：

var app = new EmberApp(defaults, {
    // ...
    "ember-cli-bootstrap-sassy": {
        glyphicons: false,
        js: ["transition", "collapse"]
    }
})

關(guān)于這個話題我簡直可以寫本小說出來了，在我?guī)嵙?xí)生的過程里被問到和發(fā)現(xiàn)最多問題的就是 Bootstrap 的用法，限于篇幅我在這里只將一些前期的要點：

大多數(shù)人是這樣用的：直接在主樣式文件里 @import "bootstrap";，然后遇到需要定制的就開始覆蓋覆蓋覆蓋……別這么搞！

看一下 |3822741913b0abccece813de6916a2f424| 以及 源碼 便知道人家本來就是模塊化開發(fā)的，既然用了 sass 咱就應(yīng)該把它當(dāng)成級別高點的編程語言來對待。我是這么做的：

創(chuàng)建 app/styles/_custom-bootstrap.scss 文件

在 app/styles/app.scss 里 @import "custom-bootstrap";，一般來說這個應(yīng)該是第一個導(dǎo)入的模塊

_custom-bootstrap.scss 怎么用？

一開始你可以把原來的 _bootstrap.scss 內(nèi)容原封不動拷貝進(jìn)來，由于 includePaths 的作用，所有導(dǎo)入的路徑都可以不變。

然后把所有的模塊導(dǎo)入都注釋掉，此時你的項目里等于完全沒有 Bootstrap。

之后一般會分兩種情況來定制：

需要用到且可以直接沿用的模塊

這個簡單，把注釋的部分去掉就好了嘛。曾經(jīng)有徒弟質(zhì)疑我：“師傅，人家官網(wǎng)上有自定義模塊構(gòu)建的功能，咱為啥不用那個？”

圖樣圖森破，那個功能就是拿來秀的，一點實用性都沒有。有多少人自定義構(gòu)建之后從頭用到尾剛剛好既不多又不少的？神都預(yù)測不到你會用到哪些組件的，難道你一遍又一遍的去構(gòu)建定制版本啊？那是菜鳥的用法。

需要用到但得修改／定制的模塊

這里又可以大致分出兩種情形，比較簡單的改動——比如變量，你可以把其定義寫在 @import "bootstrap/variables"; 的前面（特別是覆蓋默認(rèn)變量的，一定注意順序）；我會做的比較徹底，直接創(chuàng)建一個 app/styles/_custom-variables.scss 并且作為第一個模塊導(dǎo)入進(jìn)去。另外，自定義的變量不需要寫尾部的 !default。

第二種情形就比較進(jìn)階一些了，我舉個例子，以前經(jīng)常看見這樣的寫法：

...

我說你寫這么多 class 不累啊？人家 Bootstrap 是為了可重用性才定義了這種粒度很細(xì)的 helper classes，如果你是做一個 rapid prototype 那我沒意見，但是正式的產(chǎn)品這樣寫問題就大了：

像 btn-purple 這樣的命名是很糟糕的，完全沒有語義性，萬一將來要換個色彩主題怎么辦？可維護(hù)性也很差，萬一將來維護(hù)的是個色盲怎么辦？（開個玩笑）

重復(fù)的寫一串 class 可讀性也很差，如果將來要進(jìn)行微調(diào)，不熟悉這些 class 的人會被折騰死

該怎么寫？

...

/// app/styles/_custom-buttons.scss

// Overwrite for more semantic button class names
.button {
    @extend .btn;

    // Bootstrap doesn"t give buttons transition effects by default,
    // so we simply extend it here. You can use some mixin instead.
    transition: all .2s ease-out;
}

@each $name in default, primary, success, warning, danger, info, block {
    .button-#{$name} {
        @extend .btn-#{$name};
    }
}

// Define site-wide main button colors
$button-main-color:  #fff;
$button-main-bg:     $violet;
$button-main-border: darken($violet, 5%);

.button-main {
    @extend .button;
    @include button-variant(
        $button-main-color, $button-main-bg, $button-main-border
    );
}

這是個例子，我從最近的一個項目里扒出來的，僅就這一例子而言或許有點小題大做，但如果考慮一個大型的項目，這樣的改造絕對是有必要的。好的習(xí)慣要從小養(yǎng)成，正確的姿勢得貫徹始終。

類似的技巧還有好多，鑒于這里的主題是 Ember CLI 呢便就此打住了，我也是想：既然選擇了 Ember 這么靠譜的前端框架，相應(yīng)的前端技術(shù)也應(yīng)該靠譜起來吧，所以拋磚引玉一下。

Bootstrap 絕對不完美，只會用它的前端工程師絕對不是合格的前端工程師，針對 Bootstrap 不完善的地方 sass 社區(qū)還有非常多的組件值得一用。在這里我先推薦幾個，以后還可以再補(bǔ)充。

Bootstrap 的 Grid 系統(tǒng)很一般（雖說對它的定位而言也夠用），定死的 12 柵格并非時時夠用；嵌套時的 gutter 無法靈活調(diào)整；需要手動覆蓋 row 兩端 cols 的 padding（當(dāng)你需要邊緣與 container 對齊的時候，如 gallery 布局）……等等槽點都被噴了好幾年了。

Bootstrap v4 將使用 flex 做 Grid 系統(tǒng)，這是好事

所以我推薦你試一下 Susy，做布局——專業(yè)的！用在 Ember CLI 里也很簡單，|3822741913b0abccece813de6916a2f436|，然后設(shè)定一下 |3822741913b0abccece813de6916a2f437| 就好，非常輕量，非常好用

Bootstrap 自己定義了一些 |3822741913b0abccece813de6916a2f439| 善用它們會令你事半功倍，然而習(xí)慣了 compass 的開發(fā)者大概還是會覺得不夠用吧？因此我向你推薦 Bourbon，ThoughtBot 出品，Ruby 社區(qū)應(yīng)該不陌生的，品質(zhì)一流。

總的來說 Compass 就不要再用了，又大又笨而且連親爹都準(zhǔn)備放棄它了，未來將是小快靈組件協(xié)同工作的大趨勢，Bourbon 就是可以用來替代 |3822741913b0abccece813de6916a2f441| 的組件庫。另外它的兄弟 Neat 也不錯，只是功能上和我們上述的工具集合有沖突了，不是很有必要。

這個推薦一下，可以選用，主要是用來輔助響應(yīng)式設(shè)計開發(fā)的，比 Bootstrap 自帶的那點特性強(qiáng)大多了。http://breakpoint-sass.com/

前面說的一大堆綜合起來都是做 CSS 的前期處理的（也就是 pre-processing），現(xiàn)在前端也很重視后期處理（post-processing），關(guān)于這個話題呢推薦看一下 pleeease 也就差不多了。

樣式的后期處理有很多范疇，綜合考慮我認(rèn)為目前唯一稱得上必須要做的那就是 Autoprefixer，這個東西的特點及用法概括如下：

有了它，你再也不用去寫 vendor prefixes，連想都不要去想（如果你用到的第三方組件越俎代庖了也沒關(guān)系，Autoprefixer 會自動篩選一遍）

當(dāng)你構(gòu)建的時候，它會自動分析你的樣式，然后添加必要的 vendor prefixes

你可以指定針對的瀏覽器品牌，版本，受眾地區(qū)等等參量，從而讓它知道哪些 vendor prefixes 是需要加的

它通過 Can I Use 提供的技術(shù)數(shù)據(jù)來完成最終的工作

ember-cli-autoprefixer 可以幫助你把它集成到 Ember CLI 項目中，簡單好用。以下是一個配置的范例代碼：

var app = new EmberApp(defaults, {
    // ...
    autoprefixer: {
        browsers: ["> 5% in CN", "last 2 versions"]
    }
})

仔細(xì)閱讀一下 Autoprefixer 的文檔，你會發(fā)現(xiàn)配置它所用到的 DSL（BrowserList） 還蠻有趣的。

得，今天就說到這里，本來這篇早就寫得差不多了，只是這兩天一直在挖／填 Ember2 的一些坑沒顧上整理，耽誤了。到此前期的周邊打造就差不多了，下篇開始我打算重點寫一些和 Ember 的特性密切相關(guān)的東東，maybe 先從路由開始。

原文首發(fā)于 Ruby China 社區(qū)，轉(zhuǎn)載請注明。