大前端的自動化工廠（2）—— SB Family
原文鏈接：https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f
我坦白我是標題黨，SB只是
SCSS-Bourbon的簡寫。
一. 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文件中，可以放心使用。
【Bourbon】是筆者非常喜歡的工具包，首先它很符合漸進式開發的思想，每個插件只實現一個特定的功能，同時，它的所有插件都是自己開發的（ThoughtBot
bourbon——函數庫
? 通過npm install -g bourbon安裝.
bourbon已經更新至5.1.0版本，官方文檔對許多mixin並沒有提供說明，建議使用前通讀一下library目錄裏每一個獨立的文件，其中的註釋部分標明了該函數的用法。例如實用triangle( )函數來生成一個類，使其偽類包含一個指定尺寸和方向的三角形,又或者是使用tint( )或shade( )方法讓顏色按照半分比變亮或變暗，當然你也可以自行去擴展bourbon的基礎功能。
SCSS代碼為：
@import "bourbon"; .triangle-down { &::after{ content:‘‘; @include triangle("down", 2rem, 1rem, #b25c9c); } }
編譯後的代碼:
.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裏去，細思極恐。
上圖只是形象地描述了CSS技術的進化方向，並不代表後出現的就一定更好。如果在你的項目組裏通過命名規則約定就可以避免沖突，那真的沒必要為了炫技或者趕潮流就去把代碼全部改成CSS Modules或者 Styled Components的方式。
工具是為了讓工作變得更輕松，而不是變得更復雜。
大前端的自動化工廠（2）—— SB Family