前端必備：六款CSS工具讓代碼充滿魅力

【可苦可樂8 技術】隨着一系列圍繞JavaScript使用所衍生的相關工具，開發人員與設計師們正親眼見證着框架、樣板以及相似技術方案在擴展、標準化以及加快CSS使用方面所做出的巨大貢獻。目前大部分此類方案已經逐步成熟，可以切實幫助開發人員與設計師們在各種設備平臺上建立出一致性、響應式網站與Web應用程序。咱們就六大人氣CSS技術方案與開發人員們進行了交流，旨在瞭解空前繁榮的風格化工具選項如何支持他們建立出本身的工具並解決項目進展過程當中遇到的實際問題。

Base

Base是一款輕量級CSS預處理工具，可以將代碼編譯爲SASS(即Syntactically Awesome CSS)或者LESS(Leaner CSS)。儘管已經有不少框架放棄了IE瀏覽器的支持，Base仍然堅決扮演着IE擁護者的角色，Matthew Hartman表示——他設計Base的初衷在於幫助設計師們編寫出更爲簡潔且結構清晰的CSS代碼。

　　儘管目前的版本仍專一於面向桌面系統，但Hartman已經開始着手建立下一個版本、旨在利用通過修改的代碼庫將移動平臺做爲首選環境。他指出，Base「在最初進行開發時只具有很是基本的功能，但隨着其迅速發展、我開始將其應用在更多不一樣類型的網站當中。雖然遇到過許多史無前例的狀況以及使人沮喪的錯誤，但這段學習經歷既可怕又充滿樂趣。」

　　官方網站：http://matthewhartman.github.io/base/

 

Foundation

　　Foundation框架的專長在於響應式設計，這是一套專門用於建立網站與Web應用的策略方案，可以自動與用戶設備上的瀏覽器環境進行適配。

　　「Foundation是第一款專門幫助用戶建立可以運行在任何設備上的響應式站點的CSS框架，」Web設計機構Zurb合做夥伴兼Foundation設計主管Jonathan Smiley指出。「咱們自發布首個公共版本開始就一直致力於打造響應式站點，並且在經歷了五個版本的實踐研發過程後、咱們已經親眼見證了衆多開發者在建立多設備應用及站點方案時所遭遇的難題，所以有能力幫助他們順利度過難關。」

　　Foundation使用SCSS(即Sassy CSS)，提供內置組件以簡化佈局與原型設計，同時容許用戶以覆蓋方式使用本身的定製化前端。

　　官方網站：http://foundation.zurb.com/

Compass

　　Compass CSS驗證框架可以爲設計師們帶來更爲簡潔的標記、可重複使用模式同時大大簡化了Sprite圖像——像這樣的優點還有不少。「它並非一套難於上手且須要預先定義的類名稱集合。Compass當中所包含的工具數量超過了其它任何CSS框架，」開發人員Lorin Tackett表示，他利用這套框架建立出了一款網格計算器。「Compass充分考慮到了那些在將來可能出現的瀏覽器支持衝突情況，所以其中一部分功能能夠有選擇地加以關閉。」

　　Tackett指出，Compass是維護複雜Web應用程序中樣式表格的最佳選擇。

　　官方網站：http://compass-style.org/

 

Kube

　　Kube標榜自身是一款「專業級」CSS框架。儘管其它框架一樣可以提供預約義樣式以構建起視覺效果類似的站點外觀，但Kube的使用感覺更加簡單，Kube項目首席開發者之一Artem Rosnovskiy解釋稱。

　　「Kube並不會強制限定任何樣式規則或者形式，」Rosnovskiy表示，而這一特性使其在專業設計師與開發人員羣體當中得到了普遍歡迎。「不少初學者但願可以在預約義建立流程以前獲取更多指導性意見——包括色彩、網格、按鈕以及樣式等等——但Kube則爲設計師與開發人員們帶來了完全的自由空間……它要求使用者擁有老練的技能、經驗並透徹理解本身想要達成的效果。」

　　官方網站：http://imperavi.com/kube/

Responsive Grid System

　　Responsive Grid System既不屬於框架也不屬於樣板，而是一種可以「快速而簡單」的響應式網站建立方式，項目開發者Graham Miller解釋道。Responsive Grid System可以直接與現有HTML與CSS相對接。

　　「我發現一旦本身開始着手建立響應式網站，最最須要的就是可以快速切入到本身的現有代碼中並以高度靈活的方式構建任何項目，」Miller表示。「我曾經使用過不少不一樣類型的框架與樣板，但它們都傾向於讓我以其爲基礎設置網格體系、而後向其中填充內容。我是那種‘內容至上’派的開發人員，所以我創建了本身的響應式網格系統。」

　　這套方案的移動版本已經內置於其中，開發人員也能夠根據需求自行建立。

　　官方網站：http://www.responsivegridsystem.com/

Gumby

　　上世紀七十年代出生的朋友們可能還對Gumby這位活躍在兒童電視節目上的綠色黏土動畫人物留有印象，而現在一樣的名字則表明着一款CSS框架。

　　「Bumby這個名字來自定格動畫片中的人物，表明着可以爲用戶帶來快速的原型設計體驗，」Gumby框架出品方Digital Surgeons公司執行創意總監Peter Sena指出。

　　Gumby提供了多種網格與列式變化，其UI包中還包含按鈕、字體以及表單等等。Gumby旨在幫助業餘開發人員編寫並維護成百上千行代碼，Sena表示。目前其版本號爲2.6，預計Gumby 3將新增更多目前尚不支持的屏幕尺寸與設備型號，例如某些高分辨率平板設備與觸控式筆記本等。

　　官方網站：http://gumbyframework.com/