聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp

SASS and LESS

不論是SASS，仍是LESS，均可以視爲一種基於CSS之上的高級語言，其目的是使得CSS開發更靈活和更強大，這二者個人感受是對於程序員來講，SASS的功能要遠比LESS強大，基本能夠說是一種真正的編程語言了，而對於設計師，LESS則相對清晰明瞭，這裏是Chris Coyier寫的一篇關於SASS和LESS的背靠背對比，能夠說是至關中肯的(評論也至關有料喔)。固然，若是使用Rails之類的框架，基於SASS是會來的更方便一些。

---

Compass and Blueprint

SASS和Compass的關係，在不少人來看相似於ruby和rails，compass基於SASS，是一個真正意義上的編程框架，提供了大量的mixin(可理解爲函數庫)，不管是對css3繁雜的多瀏覽器寫法的簡化支持，仍是實現各類常見功能的helper，都是強大而豐富的。另外，包括Scott Davis和Eric Meyer的核心團隊，也能夠說是全明星組合。

Blueprint是一套預約義的樣式，包括對大部分經常使用web交互組件的渲染，而且有一個強大的格子布局系統(grid system)，即便不懂設計的程序員，也可使用blueprint的默認樣式作出很漂亮的頁面。

Blueprint和Compass，是一個分工很明確的組合，前者負責樣式渲染，後者則是基礎框架和模塊，能夠說，在bootstrap誕生以前，是web開發首選的黃金組合。

---

HTML5 Boilerplate

HTML5 Boilerplate項目(如下簡稱h5bp)則如同名字同樣，實現的是一個web頁面的標準模板，尤爲針對html5進行了全面優化，同時也對老瀏覽器向後兼容，基本上來講，h5bp與樣式相關的主要部分，是compass的一個子集，不過h5bp並不僅限於css，還默認引入了不少很好的js開發庫，包括Modernizr和Jquery，再加上一個標準化的index.html模板

h5bp是這裏提到的全部框架中使用起來最方便的，固然受功能限制，她最適用的目標是單頁web app或者靜態頁面，對於複雜的項目來講，須要和其餘框架作互補。

---

Twitter Bootstrap

新興而野心十足的Bootstrap跟上述又都不一樣，她是基於LESS的一套前端工具庫，意圖很是明顯，想以一個項目，整合Compass，Blueprint，h5bp的目標功能，成爲web前端的一站式解決方案。

• 一套完整的基礎css模塊，但不如compass豐富和強大
• 一套預約義樣式表，包括一個格子布局系統，和blueprint提供的差很少，只是設計風格不同
• 一組基於Jquery的js交互插件，這是Bootstrap真正強大的地方，也是她嚴格意義上能夠取代Blueprint的緣由所在，這些很是不錯的小插件，包括對話框，下拉導航等等，不但功能完善，並且十分精緻，正在成爲衆多jquery項目的默認設計標準。

特別提一下，Bootstrap使用Normalize.css來進行Reset CSS，這一項目已經成爲了事實標準(超過Compass的Eric meyer 2.0)，強烈推薦使用，另外前邊說的h5bp也使用Normalize，所以，若是你在項目中同時使用了h5bp和Bootstrap， 請注意，沒有必要再引入h5bp的初始樣式表style.css

---

So What?

說了一大堆，該來點結論了，目前對於web開發，尤爲是由程序員進行的full stack開發，最好的組合是：

SASS+Compass+Bootstrap

這樣既能夠利用SASS強大的編程能力，Compass強大的底層函數，又能夠獲取Bootstrap豐富的UI組件支持。

只是，Bootstrap是基於LESS的，要讓她們協同工做，須要一個SASS的Bootstrap移植版本，幸好github上歷來不缺這類項目，當前最好的一個是bootstrap-sass

@ericguo 特別去看了一下bootstrap-rails的代碼，發現bootstrap-rails和bootstrap-sass在對bootstrap的翻譯上實現幾乎一致，只是一些名字上的不一樣，不過我只是過了一遍相對較複雜的mixin.scss的內部實現，可能其餘模塊有比較大的差別也說不定：）

在實現差很少的狀況下，bootstrap-sass我認爲仍是稍好一點，由於能夠很方便地支持compass，不管有無rails，均可以掛成compass的擴展，這點雖然不須要不少代碼實現，但仍是頗有用的，畢竟用sass和rails的人基本都須要compass和bootstrap一塊兒工做吧。