大前端的自動化工廠（2）—— SB Family

時間 2019-11-07

標籤前端自動化工廠 family 简体版

原文原文鏈接

原文連接：https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89fcss

我坦白我是標題黨，SB只是SCSS-Bourbon的簡寫。html

一. SASS/SCSS

SASS，也稱爲SCSS，是CSS預編譯語言的一種，常見的預編譯語言還包括LESS,Stylus，除了語法風格以外它們之間沒有什麼太大的區別，從一種語言遷移到另外一種語言只須要花半天通讀一下文檔就能夠了。預編譯語言爲CSS提供了變量定義,函數定義,層級嵌套等等一系列擴展功能，使開發者更容易編寫和管理項目中的CSS代碼。筆者使用的是SCSS/SASS，由於相關工具庫更全面一些，儘管名稱偶爾會帶來一些瑕疵（建議使用SCSS）。LESS在和Sublime集成時有一些小問題，多是版本問題，stylus是新興起的，開發生態並不完善。前端

二. SCSS-Bourbon Family

因爲SCSS最初使用Ruby on Rails編寫的，因此github上提供的安裝方式幾乎都是經過gem install安裝的，但實際上在npm倉庫裏也能夠找到對應的項目。另外一方面，SCSS輔助工具庫中的工具都是以_開頭的，也就是說定義mixin的代碼並不會被編譯到產出的CSS文件中，能夠放心使用。webpack

【Bourbon】是筆者很是喜歡的工具包，首先它很符合漸進式開發的思想，每一個插件只實現一個特定的功能，同時，它的全部插件都是本身開發的（ThoughtBot在收購後維護着整個Bourbon工具鏈），這又保證了工具的質量。git

bourbon——函數庫

♒ 經過npm install -g bourbon安裝.github

bourbon已經更新至5.1.0版本，官方文檔對許多mixin並無提供說明，建議使用前通讀一下library目錄裏每個獨立的文件，其中的註釋部分標明瞭該函數的用法。例如實用triangle( )函數來生成一個類，使其僞類包含一個指定尺寸和方向的三角形,又或者是使用tint( )或shade( )方法讓顏色按照半分比變亮或變暗，固然你也能夠自行去擴展bourbon的基礎功能。web

SCSS代碼爲：npm

@import "bourbon";
.triangle-down {
    &::after{
     content:'';   
     @include triangle("down", 2rem, 1rem, #b25c9c);
    }
}

編譯後的代碼:sass

.triangle-down::after {
  content: '';
  border-style: solid;
  height: 0;
  width: 0;
  border-color: #b25c9c transparent transparent;
  border-width: 1rem 1rem 0;
}

純CSS是能夠諸如六邊形等不少形狀的，你徹底能夠在網上學習它們的實現方法，而後將其編寫爲擴展的mixin加入到本身的經常使用工具箱中。框架

Bitters——腳手架

♒ 經過npm install -g bourbon-bitters安裝

Bitters是Bourbon工具家族裏的腳手架，它將你的基礎樣式分拆爲*_bass* , *_buttons* , *_forms* , *_layout* , *_lists* , *_media* , *_tables* , *_typography* , *_variables* 等幾個不一樣的文件並提供一些初始樣式，開發中能夠將與基礎模塊相關的樣式擴展寫在這些文件中，這樣的作法能夠在必定程度上下降項目的維護難度。

固然你也能夠直接引入normolize.css來對項目進行樣式的重置。

Neat——網格工具

♒ 經過npm install -g bourbon-neat安裝.

咱們使用的第三方UI框架中，幾乎都使用經典的12列布局，但總有些產品經理會提出但願將某一列的寬度擴展到1.5倍這種需求，或者有些場景下你但願對整個網頁的佈局進行更精細的控制，這個時候輕量級的網格工具Neat就派上用場了，輕量，強大，易用，輕鬆實現網格劃分,網格嵌套,響應式佈局等複雜的功能。具體的使用文檔能夠訪問其官方網站Neat官方網址查看文檔。

使用示例：

下面簡單的幾行代碼編譯爲CSS後，就能夠實現將頁面分爲間距爲20px的10列，左側邊欄佔2列，右側內容區佔8列；而後又將右側內容區分爲間距爲10px的6列，每一個表格項佔1列。

@import "neat";
/*定義網格*/
$sidebar-layout:(
    columns: 10,
    gutter: 20px
);

$list-layout: (
    columns: 6,
    gutter: 10px
);
/*使用網格*/
.sidebar-layout{
    @include grid-container;
}
.sidebar-layout__sidebar{
    @include grid-column(2,$sidebar-layout);
}

.sidebar-layout__content{
    @include grid-column(8,$sidebar-layout);
}

.list-layout{
    @include grid-container;
    @include grid-collapse($list-layout);
}

.list-item{
    @include grid-column(1, $list-layout);
}

Coolor——自動化配色工具

♒ 訪問http://coolor.co

Coolor.co其實並非Bourbon家族的成員，但你應該會喜歡它，這是一個免費的網站（移動端是收費的），在你指定一個主題色後，它會爲你返回一組漂亮的包含5個顏色的配色方案，若是不滿意直接一鍵切換就能夠了，今後冒充設計師看誰還敢攔着你~

三. CSS Evolution

隨着前端構建工具的興起，CSS的開發也進入了一個全新的階段，自動化構建工具(例如webpack)帶來了新的開發方式，SASS和BEM的年代，還只能經過限制命名規則的方式來避免CSS衝突和相互覆蓋。

CSS Modules藉助構建工具實現了真正的模塊化，webpack4中在css-loader配置項中就能夠直接啓用CSS模塊化功能，使用起來很是方便。其原理就是經過構建工具將文件中的類名直接替換爲Hash來實現。

Styled Components，實際上就是炒的火熱的CSS-In-Js的一種實現。新事物老是褒貶不一的，有人說它是大勢所趨，也有人說它很難用，筆者的建議是：繼續觀望。Styled Components概念的興起頗有多是React團隊的炒做行爲，JSX已經將HTML和JS代碼放在一塊兒編寫，使用起來感受還不錯，若是又加上CSS-In-JS , 那麼至關於使用JSX同時編寫HTML+CSS+JS，你說這種鼓吹沒有私心誰信？之前使用<script>和<style>標籤把代碼都寫在<html>中，大家叫囂着"結構，樣式，行爲三者分離"，如今大夥把代碼分離了，大家又忽悠着你們把結構樣式行爲混在一塊兒寫到JSX裏去，細思極恐。