關於sass（scss）、less、postcss、stylus等的用法與區別

一. Sass/Scss、Less、stylus是什麼?

它們都是css預處理器。css預處理器的概念：CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程的特性，無需考慮瀏覽器的兼容性問題。 好比說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。都屬於css預處理器。

其中比較優秀的： Sass、LESS，Stylus

Sass(Syntactically Awesome Stylesheets)：

注： Sass官網地址

Sass是一種動態樣式語言，Sass語法屬於縮排語法，比css比多出好些功能(如變量、嵌套、運算,混入(Mixin)、繼承、顏色處理，函數等)，更容易閱讀。

Sass與Scss是什麼關係?

Sass的縮排語法，對於寫慣css前端的web開發者來講很不直觀，也不能將css代碼加入到Sass裏面，所以sass語法進行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進。

Less：

注： Less官方地址

Less也是一種動態樣式語言. 受Sass影響較大,對CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. Less 既能夠在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可在服務端運行 (藉助 Node.js)。

Stylus：

注： Stylus官方地址

2010年產生於node社區， 主要用來給Node項目進行CSS預處理支持，人氣不如前二者

Stylus被稱爲是一種革命性的新語言，提供一個高效、動態、和使用表達方式來生成CSS，以供瀏覽器使用。Stylus同時支持縮進和CSS常規樣式書寫規則。

須要安裝node

Stylus的語法花樣多一些，它的文件擴展名是「.styl」，Stylus也接受標準的CSS語法，可是他也像Sass老的語法規則，使用縮進控制，同時Stylus也接受不帶大括號（｛｝）和分號的語法

Stylus優勢：

• 更加健壯
• 寫法更接近於js
• 功能強大

Stylus缺點：

• 寫法須要必定時間適應
• 學習曲線比較陡峭

二. Sass/Scss與Less、stylus區別

2.1 編譯環境不同

Sass的安裝須要Ruby環境，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出css到瀏覽器，也能夠在開發環節使用Less，而後編譯成css文件，直接放到項目中，也有 Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。Stylus須要安裝node，而後安裝最新的stylus包便可使用

2.2 變量符不同

Less是@，而Scss是$， Stylus樣式中聲明變量沒有任何限定，你可使用「$」符號開始。結尾的分號（;）無關緊要，但變量名和變量值之間的等號（=）是須要的。有一點須要注意的是，若是咱們使用「@」符號開頭來聲明變量，Stylus會進行編譯，但其對應的值並不會賦值給變量。換句話說，在Stylus中不要使用「@」符號開頭聲明變量。Stylus中調用變量的方法和LESS、Sass是徹底相同的。

並且變量的做用域也是不同的

Less-做用域
@color: #00c; /* 藍色 */
#header {    
    @color: #c00; /* red */
    border: 1px solid @color; /* 紅色邊框 */
}
#footer {
    border: 1px solid @color; /* 藍色邊框 */
}
Less-做用域編譯後
#header{
    border:1px solid #cc0000;
}
#footer{
    border:1px solid #0000cc;
}
scss-做用域
$color: #00c; /* 藍色 */
#header {
    $color: #c00; /* red */
    border: 1px solid $color; /* 紅色邊框 */
}
#footer {
    border: 1px solid $color; /* 藍色邊框 */
}
Sass-做用域編譯後
#header{
    border:1px solid #c00
}
#footer{
    border:1px solid #c00
}
/ *stylus聲明變量*/
mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
/*stylus調用變量*/ | 
/*轉譯出來的CSS*/
body {
    color mainColor | color: #963;
    border 1px $borderStyle mainColor | border:1px dotted #963
    max-width siteWidth | max-width:1024px;| 
}複製代碼

咱們能夠看出來，less和scss、stylus中的變量會隨着做用域的變化而不同。Sass的做用域最差，less和stylus同樣，都是向上查找，直到找到根部位置

2.3 輸出設置

Less沒有輸出設置，Sass提供4中輸出選項：nested, compact, compressed 和 expanded，stylus不知。

輸出樣式的風格能夠有四種選擇，默認爲nested

• nested：嵌套縮進的css代碼
• expanded：展開的多行css代碼
• compact：簡潔格式的css代碼
• compressed：壓縮後的css代碼

2.4. 處理條件語句

Sass支持條件語句，可使用if{}else{},for{}循環等等。 LESS的條件語句使用有些另類，他不是咱們常見的關鍵詞if和else if之類，而其實現方式是利用關鍵詞「when」。stylus的條件語句的使用和其餘編程的條件語句使用基本相似，不一樣的是他能夠在樣式去省略大括號（｛｝）：

/* Sample Sass 「if」 statement */
@if lightness($color) > 30% {} 
@else {}
/* Sample Sass 「for」 loop */
@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}
stylus中：
box(x, y, margin = false)padding y xif marginmargin y xbodybox(5px, 10px, true)
Stylus一樣能夠和else if、else配套使用：
box(x, y, margin-only = false)if margin-onlymargin y xelsepadding y x複製代碼

sass中使用條件：

.mixin (@a) when (@a >= 10) {
    background-color: black;
}
.mixin (@a) when (@a < 10) {
    background-color: white;
}
.class1 { 
    .mixin(12) 
}
.class2 { 
    .mixin(6) 
}
複製代碼

轉譯後：

.class1 {
    background-color: black;
}
.class2 {
    background-color: white;
}複製代碼

2.5  引用外部CSS文件

scss引用的外部文件命名必須以_開頭, 以下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分別設置的h1 h2 h3。文件名若是如下劃線_開頭的話，Sass會認爲該文件是一個引用文件，不會將其編譯爲css文件.

// 源代碼：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 編譯後：
h1 {
    font-size: 17px;
}
h2 {
    font-size: 17px;
}
h3 {
    font-size: 17px;
}複製代碼

Less引用外部文件和css中的@import沒什麼差別。

Stylus一樣能夠用@import，也支持其餘文件經過@import進行引入

2.6 Sass和Less的工具庫不一樣

Sass有工具庫Compass, 簡單說，Sass和Compass的關係有點像Javascript和jQuery的關係,Compass是Sass的工具庫。在它的基礎上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。

Less有UI組件庫Bootstrap,Bootstrap是web前端開發中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是採用Less語法編寫。

Archer一個的英文面向移動端的的，基於stylus的樣式工具庫。

Archer於起源est項目，於專一純移動端的瀏覽器的樣式展現。若有本地桌面端的需求，請使用 est。

三. 總結

不論是Sass，仍是Less或者stylus，均可以視爲一種基於CSS之上的高級語言，其目的是使得CSS開發更靈活和更強大，Sass、stylus的功能比Less強大,基本能夠說是一種真正的編程語言了，Less則相對清晰明瞭,易於上手,對編譯環境要求比較寬鬆。考慮到編譯Sass要安裝Ruby,而Ruby官網在國內訪問不了,我的在實際開發中更傾向於選擇Less。

4、PostCSS

官網地址

• PostCSS介紹：

A tool for transforming CSS with JavaScript

PostCSS 是目前流行的一個對 CSS 進行處理的工具（平臺）。PostCSS 依託其強大的插件體系爲 CSS 處理增長了無窮的可能性。

PostCSS 自己是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。插件基於 CSS 代碼的 AST 所能進行的操做是多種多樣的，好比能夠支持變量和混入（mixin），增長瀏覽器相關的聲明前綴，或是把使用未來的 CSS 規範的樣式規則轉譯（transpile）成當前的 CSS 規範支持的格式。從這個角度來講，PostCSS 的強大之處在於其不斷髮展的插件體系。目前 PostCSS 已經有 200 多個功能各異的插件。開發人員也能夠根據項目的須要，開發出本身的 PostCSS 插件。

PostCSS 從其誕生之時就帶來了社區對其類別劃分的爭議。這主要是因爲其名稱中的 post，很容易讓人聯想到 PostCSS 是用來作 CSS 後處理（post-processor）的，從而與已有的 CSS 預處理（pre-processor）語言，如 SASS 和 LESS 等進行類比。實際上，PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 能夠操做的 AST，第二個就是調用插件來處理 AST 並獲得結果。所以，不能簡單的把 PostCSS 歸類成 CSS 預處理或後處理工具。PostCSS 所能執行的任務很是多，同時涵蓋了傳統意義上的預處理和後處理。PostCSS 是一個全新的工具，給前端開發人員帶來了不同的處理 CSS 的方式。

• PostCSS使用

PostCSS 通常不單獨使用，而是與已有的構建工具進行集成。PostCSS 與主流的構建工具，如 Webpack、Grunt 和 Gulp 均可以進行集成。完成集成以後，選擇知足功能需求的 PostCSS 插件並進行配置。如今常常用到的是基於PostCSS的Autoprefixer插件，使用方式能夠在官網的插件庫進行查詢。下面是官方插件庫地址：

PostCSS插件庫地址

• PostCSS的優勢

1.擴展性強 2.兼容性強 3.功能全面 4.有不少插件庫供選擇

• PostCSS的缺點

1.配置繁瑣 2.學習相對陡峭