轉載至http://www.lxweimin.com/p/b2174b800e40

<meta charset="utf-8">

CSS Preprocess Different

在前端界，有三大 CSS 預處理器，分別是 SASS(SCSS), Less, Stylus。

或許有的人在問，那么 PostCSS 算什么呢？其實他只能算是 CSS 解析器。不能算作預處理器。

由于這三大預處理出現的時間不同，而他們之間也會有一些不同的地方，所以在這里我們整理一下他們那些地方不同，方便學習記憶以及選擇。當然，我們這里比較的時候會深入比較，而不是泛泛而談。

但是前提最好是你有對其中一種預處理的使用經驗，可以通過我這篇文章可以快速了解其他的預處理的語法格式等等內容。如果你沒有相關的語言語法，那么請你學習其中的一個之后再來閱讀此文章。

如果你問我現在用什么，當然是 stylus 了，:>

語法 Syntax

Sass(Scss)

Sass 有兩種語法格式。首先是 SCSS (Sassy CSS)， 這種格式僅在 CSS3 語法的基礎上進行拓展，所有 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作為拓展名。

另一種也是最早的 Sass 語法格式，被稱為縮進格式 (Indented Sass) 通常簡稱 "Sass"，是一種簡化格式。它使用 “縮進” 代替 “花括號” 表示屬性屬于某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認為這樣做比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可以使用 Sass 的全部功能，只是與 SCSS 相比個別地方采取了不同的表達方式。

Less

Less 其實在某種程度上很像 Scss，它和 CSS 也是完全兼容的。要有分號，要有冒號，還有大括號。

Stylus

他的語法和 Sass 有一點點類似，但是最大的特點便是沒有分號，沒有冒號，沒有大括號，通過縮進和換行。一切的定義方式都是按照編程的風格定義的，像編程一樣的函數調用，像編程一樣的變量定義，像編程一樣的書寫方式。
除此之外，他還有一個最大的優點便是他隨意的格式，官方推薦的是無分號，無冒號，無大括號，但是他可以有分號，可以有冒號，也可以有大括號，也就是說你愿意的話，你完全可以當做普通的 CSS 文件來寫，甚至是 Less,Sass 等其他預處理器的風格。所以這也就是我為什么用這個的原因。

注釋

• Sass (//, /* */)，多行注釋會完整的輸出到編譯之后的文件，但是單行不會，所以如果是對文件描述的可以使用多行注釋，如果只是開發相關的，請使用單行注釋。當然這些行為參數可以控制。
  可以使用 ! 作為多行注釋的第一個字符，表示即使在壓縮模式下也保留這條注釋并輸出到 CSS 文件中，通常用于版權的添加。

Playground

• SassMeister
• Less Online Editor
• Stylus Compiler

具體內容請查看官方文檔。

變量 Variables

開頭標識

• Sass 用 $ 表示變量
• Less 用 @ 表示變量
• Stylus 沒有特殊的開頭標識

賦值方式

• Sass/Less 通過 var-name: var-value; 的方式
• Stylus 通過 = 賦值的方式，類似于編程語言的編程方式

Sass

Sass 的變量以 $ 開頭，賦值方法與 CSS 屬性的寫法一致：

$var-name: var-value;

直接使用就可以獲取變量的值，非常簡單。同樣支持塊級作用域，也分為全局變量（所有 Rule 外面定義的變量）和局部變量（在規則內部定義的變量）。同時支持將局部變量聲明為全局變量，通過 !global 聲明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

// output
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

Sass 支持 6 種主要的數據類型

• 數字，1, 2, 13, 10px
• 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
• 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布爾型，true, false
• 空值，null
• 數組 (list)，用空格或逗號作分隔符，多維數組用 () 包括，逗號比空格的優先級要高，所以會優先用逗號分隔數組，1.5em 1em 0 2em, Helvetica, Arial, sans-serif。輸出時扁平化輸出。
• maps, 相當于 JavaScript 的 object，(key1: value1, key2: value2)

Less

Less 的變量是以 @ 開頭，語法格式類似于 CSS 的 Property 的書寫格式，與 Sass/Scss 有一些類似：

@var-name: var-value;

使用的時候也是帶著 @，他支持變量插值，類似于 PHP 那樣的。比如說

@red: 1;
@var1: red;
@var2: @{@var1}; // 1
// or
@var2: @@var1;

同時變量的執行都是懶加載，也就是說變量的值得計算都是在你用到的時候計算的，例如

@a: 1;
@b: @a;

.a {
  content: @b; // 1
}

.b {
  @a: 2;
  content: @b; // 2
}

當然他也有作用域，有根級的作用域，也有塊級的作用域。所以我們只需要在當前作用于修改變量，并不會影響上級作用域的變量的內容。

但是文檔中并沒有提及類型的問題，所以不得而知。

Stylus

變量通過 = 進行定義，就像是普通的編程的變量一般，不需要什么特殊的前綴：

var-name = var-value

不過我還是推薦使用 $ 作為開頭，因為當 stylus 寫大的時候，你會發現經常你會把變量和屬性值弄混，所以建議用 $ 開頭，這樣我們可以很清晰的看出來，那個是變量，那個是屬性值。

運算 Operations

算數運算

所有的算數運算都支持單位的運算，也支持自動轉化，比如說 20mm + 4in = 121.6mm。如果發現單位無法轉換，那么一般是忽略單位只有單獨運算，運算結束之后再加上左操作數的單位，例如 5s - 3px = 2s。
有一點例外的就是，對于乘法除法來說，單位相乘是沒有什么意義的，所以在乘除當中和單位無法轉換的情況相同。
如果操作的類型是顏色類型的話，那么運算都是相對于 R/G/B 單獨計算的，也就是說 #0000ff + #000001 = #0000ff 而不是 #000100，不存在進位的情況。

數組運算

• Sass 不支持任何數組的運算符，全部都是通過函數操控
• Less 沒有找到文檔，測試無法使用 []，目測也是通過和 Sass 一樣的方式。
• Stylus 支持 [] 下標取值

函數 Function

函數定義

• Sass，通過一個 @function 來定義一個函數，然后通過 @return 返回一個值
• Less，準確說沒有函數這個概念，但是他有 混入(Mixin) 來充當函數的概念。不過這個也是合理的，畢竟 CSS 是最后需要輸出一段字符串，一切操作都是為了生成字符串，所以沒有函數也是完全可以接受的。

嵌套 Nest rules

所有的預處理中都有嵌套的功能，而且語法都是類似的，將 Rule 寫在某個 Rule 里面，便可以實現嵌套的功能。
不需要每次都輸入父選擇器了，方便快捷高效。
同理，也都有 & 父選擇引用，可以方便的在 Rule 內部定義父級的 Rule，一般用來定義 hover 或者相連的選擇器 &.other-class。

Less 中還支持嵌套 Directive，比如 media, keyframe 等等。這些 Directives 及時再非常深的地方，也會一起冒泡到頂級。

混合 Mixins

定義

• Sass 會復雜一些，需要使用 @mixin 指令定義。簡寫為 =
• Less 很簡單，一個類就可以是一個混入的定義，當然 ID 也可以，不過標簽不可以，也就是說你必須要有 . 或者 # 開頭。在這種情況下，所有的混入自然會輸出的(它也沒法區分混入和普通類)，如果你不想讓他輸出，那么可以在定義的類名后面添加 () 從而不讓其在最后的結果中輸出，感覺就像是定義了一個函數 :)
• Stylus 很簡單，在后面添加 () 即可，類似于普通的函數。

使用

• Sass 需要通過 @include 指令引入混入。簡寫為 +
• Less 通過直接引用類名可以直接進行混入，當然加不加括號都是可以的 .a() 或者 .a 都是正確的寫法。
• Stylus 使用 Mixin 主要有兩種方式，第一種就是類似于函數調用的方式，通過 ()，第二種便是將 Mixin 當做普通的屬性來使用（正是因為這個的存在，所以你可以定義一個和標準 CSS 屬性同名的 Mixin，從而修改這個屬性的輸出，通常用于 hack）。推薦使用第二種方式，可以保持整個代碼的整潔。

參數、關鍵詞參數、 Rest 參數(...)

這三者都支持，定義方式也是大同小異，沒什么可以說的。也都支持類似于 JS 中 arguments 的變量。

• Sass 不支持，用 , 分隔參數
• Less @arguments， 用 ; 分隔參數，這樣更像是屬性定義。
• Stylue arguments，用 , 分隔參數

不過 Less 有一點比較特殊，因為他沒有函數，也就是說他很難做到根據不同的輸入有不同的輸出（屬性上的不同），所以它支持模式匹配，也就是說根據某些參數來運行不同的 Mixin，其實就是 Mixin 重載。

向 Mixin 傳入自定義 Rules

• Sass 支持像 Ruby 的 Block，也就是說你可以直接傳入一段自定義的 Block，通過 @content 引用這段 Block，例子請查看官網。
• Less 目前沒有發現這個功能。
• Stylus 在使用 Mixins 前面添加 + 就可以在后面添加 Block。其實只是想和 Mixin 定義區分開。

Mixin 定義嵌套

目前在文檔中都沒有相關內容的介紹，發現部分是可以的。

• Sass 不允許嵌套定義
• Less 可以定義，而且可以從外面引用到
• Stylus 可以定義，但是限制作用域，只能在定義的位置使用。

總體來說，Sass 和 Less 在混入方面我還是喜歡 Less，簡單直接。

控制語句 Controls

if

• Sass if 有兩種，第一種是 if() 函數，第二種便是 @if 指令。如果指令的表達式為真，那么久輸出值，否則就不輸出。當然也有 @else if 和 @else。條件表達式不需要括號
• Less 沒有直接對應的東西，但是他有一個 Guard 的概念，可以認為是變種的 if。通過在某些選擇器、Mixin 定義后面添加 when (condition)。只有當 condition 為真的時候，相應的選擇器、Mixin 才會起作用。
• Stylus if/else 跟普通編程語言幾乎是一模一樣的，也可以嵌套，這里就不多講了。不過 Stylus 還有一個 unless ，就是 if 加了 !，其他都是一樣的。也支持后添加的條件表達式，類似于 CoffeeScript 和 Ruby。條件表達式不需要括號

Loop

• Sass 的循環主要有兩種語法 @for $var from <start> through <end> 和 @for $var from <start> to <end> 區別在于 through 與 to 的含義：當使用 through 時，條件范圍包含 <start> 與 <end> 的值，而使用 to 時條件范圍只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何變量，比如 $i；<start> 和 <end> 必須是整數值。反正 Sass 的 for 循環只支持整數。
  也有 @while 循環，他的就簡單多了，只需要接受一個條件表達式就可以了。
  但是如果你想循環其他的元素，那么你需要使用 @each $var in <list>。支持解構
• Less 首先大家要清楚，Less 中的變量都是懶加載的所，他無法實現循環中對變量的有效控制，所以他支持 Mixin 內調用自己，也即是說通過 Guard 和 Pattern Matching 通過遞歸實現循環。
• Stylus 簡單來說就一個 for <val-name> [, <index-name>] in <expression>。就跟普通的 JS 語句一樣。和 if 語句類似，他也支持后綴表達式。但是如果 express 是 Hashes，那么表達式相應的變為 for <key-name>, <value-name> in <hashes>

導入 Imports

無一例外，三大框架都使用了 @import 作為導入的關鍵字。這里就會有一個問題，因為 @import 在 CSS 中也有，于是就存在到底是將文件導入進來還是僅僅作為一個 CSS 的關鍵字輸出呢？
總體來說有如下的規則：

• 如果是以 .css 結尾，那么直接輸出，不導入
• 如果包含 url() 也直接輸出到文件，不導入
• 如果包含 http:// 或者 https:// 也就是網絡請求，那么也直接輸出到文件中，不導入
• 其他情況，當做普通的編程文件導入。

特殊情況

• Sass
  • 如果包含 media queries 也直接輸出，不導入。
• Less
  • 如果包含 url() 或者 http:///https://，并不直接輸出，而是導入。
  • Less 只有一種情況會直接輸出，那么就是如果文件以 .css 結尾
• Stylus
  • 支持 glob 導入，支持 index 導入，類似于 node 的包管理機制一般。

同時這三大框架都支持 嵌套導入。部分支持 引用導入 和 內聯導入，同時 Less 的 @import 默認是只導入一次的。

• Sass
  • 支持引用導入，可以僅僅導入但是不輸出為 CSS，只需要在文件名前添加下劃線，但是導入語句中不需要
  • 如果同時存在添加下換線與未添加下換線的同名文件時，添加下劃線的會被忽略
• Less
  • 支持 @import (options) "filename" 設置不同的導入模式，現在總共有 7 種，可以通過逗號分隔多個參數。
    • reference 引用導入，不輸出 css
    • inline 直接內聯，輸出為 css
    • less 將文件當做 less 文件，忽略他的后綴名
    • css 將文件當做 css 文件，忽略他的后綴名
    • once 只導入一次（默認行為）
    • multiple 導入多次
    • optional 到文件未找到的時候，忽略這個錯誤，繼續執行
• Stylus
  • 默認情況下 @import 是可以導入多次的，但是如果你想要導入一次的話，可以通過 @require，這兩者只有導入次數的區別，沒有別的區別。類似于 php 的 require 和 import。
  • Stylus 是沒有是否 引用導入的這個功能的，因為 Stylus 不能將 Rule 作為 mixin 進行使用，所以就不會出現 Sass/Less 這種有一些 Rule 只是 mixin 而不是普通的 Rule 的情況，所以也就不需要有 引用導入 這個功能。

擴展 Extends

簡單說一些 Extend 和 Mixin 的區別的吧，Mixin 就像是 copy/paste，每次執行 Mixin ，都會在不同的 Rule 下面有相同的內容，他們不會進行復用。但是 Extend 會進行復用，將相同的內容提取出來，復用成一個 Rule。

不過有一點很特殊的是， Less 竟然沒有 Extned。而且 Stylus 的 Extend 還是由 Sass 擴展過來的，所以他們兩個基本相同，都使用 @extend 關鍵字。
而且 Sass 的 Extend 沒有什么太多的概念，我就一起來講了。

首先兩者有一個最大的區別就是 Stylus 支持 nested selector，而 Sass 是不支持的。

其次兩者都有 placeholder ，也就是僅僅用于 extend 的類，但是兩者的定義方式不一樣。

• Sass 通過將 #/. 替換為 %
• Stylus 通過在最前面添加 $ 來實現的，其實用這個也能彌補 Stylus 沒有那種只定義不輸出的功能，只不過只能用于 Extend

也支持 optional 功能，其實就是如果找不到 Extend 類但是不報錯的樣子。通過在類后面添加 !optional。
DEMO: @extend .a !optional, .b !optional

其他指令 Other Directives

@css

• Stylus
  • 有的時候 Stylus 無法正確的處理 css 的選擇器，你可以將 css 屬性放入到 @css 標簽內。內部的類都將作為普通的 css 來處理。

其他功能 Others

Error Handle

• Stylus
  • 支持自定義的錯誤輸出，通過 error 函數

Introspection

• Stylus
  • 允許 Mixin 和 Function 使用反射獲取對應的信息

生態 Community

Stylus

• nib 各種工具大集合，也自帶各種 hack 類。

總結

不過總的來說，這種預處理器估計是因為太簡單了吧，所以文檔寫的都很直接但是不深入，也沒有類似于編程語言的 Spec，只是給你簡單介紹了一下例子以及如何使用。
很蛋疼。。。

作者：XGHeaven
鏈接：http://www.lxweimin.com/p/b2174b800e40
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。