CSS Preprocess Different

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

或許有的人在問(wèn)，那么 PostCSS 算什么呢？其實(shí)他只能算是 CSS 解析器。不能算作預(yù)處理器。

由于這三大預(yù)處理出現(xiàn)的時(shí)間不同，而他們之間也會(huì)有一些不同的地方，所以在這里我們整理一下他們那些地方不同，方便學(xué)習(xí)記憶以及選擇。當(dāng)然，我們這里比較的時(shí)候會(huì)深入比較，而不是泛泛而談。

但是前提最好是你有對(duì)其中一種預(yù)處理的使用經(jīng)驗(yàn)，可以通過(guò)我這篇文章可以快速了解其他的預(yù)處理的語(yǔ)法格式等等內(nèi)容。如果你沒(méi)有相關(guān)的語(yǔ)言語(yǔ)法，那么請(qǐng)你學(xué)習(xí)其中的一個(gè)之后再來(lái)閱讀此文章。

如果你問(wèn)我現(xiàn)在用什么，當(dāng)然是 stylus 了，:>

語(yǔ)法 Syntax

Sass(Scss)

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

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

Less

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

Stylus

他的語(yǔ)法和 Sass 有一點(diǎn)點(diǎn)類似，但是最大的特點(diǎn)便是沒(méi)有分號(hào)，沒(méi)有冒號(hào)，沒(méi)有大括號(hào)，通過(guò)縮進(jìn)和換行。一切的定義方式都是按照編程的風(fēng)格定義的，像編程一樣的函數(shù)調(diào)用，像編程一樣的變量定義，像編程一樣的書寫方式。
除此之外，他還有一個(gè)最大的優(yōu)點(diǎn)便是他隨意的格式，官方推薦的是無(wú)分號(hào)，無(wú)冒號(hào)，無(wú)大括號(hào)，但是他可以有分號(hào)，可以有冒號(hào)，也可以有大括號(hào)，也就是說(shuō)你愿意的話，你完全可以當(dāng)做普通的 CSS 文件來(lái)寫，甚至是 Less,Sass 等其他預(yù)處理器的風(fēng)格。所以這也就是我為什么用這個(gè)的原因。

注釋

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

Playground

• SassMeister
• Less Online Editor
• Stylus Compiler

具體內(nèi)容請(qǐng)查看官方文檔。

變量 Variables

開(kāi)頭標(biāo)識(shí)

• Sass 用 $ 表示變量
• Less 用 @ 表示變量
• Stylus 沒(méi)有特殊的開(kāi)頭標(biāo)識(shí)

賦值方式

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

Sass

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

$var-name: var-value;

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

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

#sidebar {
  width: $width;
}

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

#sidebar {
  width: 5em;
}

Sass 支持 6 種主要的數(shù)據(jù)類型

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

Less

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

@var-name: var-value;

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

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

同時(shí)變量的執(zhí)行都是懶加載，也就是說(shuō)變量的值得計(jì)算都是在你用到的時(shí)候計(jì)算的，例如

@a: 1;
@b: @a;

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

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

當(dāng)然他也有作用域，有根級(jí)的作用域，也有塊級(jí)的作用域。所以我們只需要在當(dāng)前作用于修改變量，并不會(huì)影響上級(jí)作用域的變量的內(nèi)容。

但是文檔中并沒(méi)有提及類型的問(wèn)題，所以不得而知。

Stylus

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

var-name = var-value

不過(guò)我還是推薦使用 $ 作為開(kāi)頭，因?yàn)楫?dāng) stylus 寫大的時(shí)候，你會(huì)發(fā)現(xiàn)經(jīng)常你會(huì)把變量和屬性值弄混，所以建議用 $ 開(kāi)頭，這樣我們可以很清晰的看出來(lái)，那個(gè)是變量，那個(gè)是屬性值。

運(yùn)算 Operations

算數(shù)運(yùn)算

所有的算數(shù)運(yùn)算都支持單位的運(yùn)算，也支持自動(dòng)轉(zhuǎn)化，比如說(shuō) 20mm + 4in = 121.6mm。如果發(fā)現(xiàn)單位無(wú)法轉(zhuǎn)換，那么一般是忽略單位只有單獨(dú)運(yùn)算，運(yùn)算結(jié)束之后再加上左操作數(shù)的單位，例如 5s - 3px = 2s。
有一點(diǎn)例外的就是，對(duì)于乘法除法來(lái)說(shuō)，單位相乘是沒(méi)有什么意義的，所以在乘除當(dāng)中和單位無(wú)法轉(zhuǎn)換的情況相同。
如果操作的類型是顏色類型的話，那么運(yùn)算都是相對(duì)于 R/G/B 單獨(dú)計(jì)算的，也就是說(shuō) #0000ff + #000001 = #0000ff 而不是 #000100，不存在進(jìn)位的情況。

數(shù)組運(yùn)算

• Sass 不支持任何數(shù)組的運(yùn)算符，全部都是通過(guò)函數(shù)操控
• Less 沒(méi)有找到文檔，測(cè)試無(wú)法使用 []，目測(cè)也是通過(guò)和 Sass 一樣的方式。
• Stylus 支持 [] 下標(biāo)取值

函數(shù) Function

函數(shù)定義

• Sass，通過(guò)一個(gè) @function 來(lái)定義一個(gè)函數(shù)，然后通過(guò) @return 返回一個(gè)值
• Less，準(zhǔn)確說(shuō)沒(méi)有函數(shù)這個(gè)概念，但是他有 混入(Mixin) 來(lái)充當(dāng)函數(shù)的概念。不過(guò)這個(gè)也是合理的，畢竟 CSS 是最后需要輸出一段字符串，一切操作都是為了生成字符串，所以沒(méi)有函數(shù)也是完全可以接受的。

嵌套 Nest rules

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

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

混合 Mixins

定義

• Sass 會(huì)復(fù)雜一些，需要使用 @mixin 指令定義。簡(jiǎn)寫為 =
• Less 很簡(jiǎn)單，一個(gè)類就可以是一個(gè)混入的定義，當(dāng)然 ID 也可以，不過(guò)標(biāo)簽不可以，也就是說(shuō)你必須要有 . 或者 # 開(kāi)頭。在這種情況下，所有的混入自然會(huì)輸出的(它也沒(méi)法區(qū)分混入和普通類)，如果你不想讓他輸出，那么可以在定義的類名后面添加 () 從而不讓其在最后的結(jié)果中輸出，感覺(jué)就像是定義了一個(gè)函數(shù) :)
• Stylus 很簡(jiǎn)單，在后面添加 () 即可，類似于普通的函數(shù)。

使用

• Sass 需要通過(guò) @include 指令引入混入。簡(jiǎn)寫為 +
• Less 通過(guò)直接引用類名可以直接進(jìn)行混入，當(dāng)然加不加括號(hào)都是可以的 .a() 或者 .a 都是正確的寫法。
• Stylus 使用 Mixin 主要有兩種方式，第一種就是類似于函數(shù)調(diào)用的方式，通過(guò) ()，第二種便是將 Mixin 當(dāng)做普通的屬性來(lái)使用（正是因?yàn)檫@個(gè)的存在，所以你可以定義一個(gè)和標(biāo)準(zhǔn) CSS 屬性同名的 Mixin，從而修改這個(gè)屬性的輸出，通常用于 hack）。推薦使用第二種方式，可以保持整個(gè)代碼的整潔。

參數(shù)、關(guān)鍵詞參數(shù)、 Rest 參數(shù)(...)

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

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

不過(guò) Less 有一點(diǎn)比較特殊，因?yàn)樗麤](méi)有函數(shù)，也就是說(shuō)他很難做到根據(jù)不同的輸入有不同的輸出（屬性上的不同），所以它支持模式匹配，也就是說(shuō)根據(jù)某些參數(shù)來(lái)運(yùn)行不同的 Mixin，其實(shí)就是 Mixin 重載。

向 Mixin 傳入自定義 Rules

• Sass 支持像 Ruby 的 Block，也就是說(shuō)你可以直接傳入一段自定義的 Block，通過(guò) @content 引用這段 Block，例子請(qǐng)查看官網(wǎng)。
• Less 目前沒(méi)有發(fā)現(xiàn)這個(gè)功能。
• Stylus 在使用 Mixins 前面添加 + 就可以在后面添加 Block。其實(shí)只是想和 Mixin 定義區(qū)分開(kāi)。

Mixin 定義嵌套

目前在文檔中都沒(méi)有相關(guān)內(nèi)容的介紹，發(fā)現(xiàn)部分是可以的。

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

總體來(lái)說(shuō)，Sass 和 Less 在混入方面我還是喜歡 Less，簡(jiǎn)單直接。

控制語(yǔ)句 Controls

if

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

Loop

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

導(dǎo)入 Imports

無(wú)一例外，三大框架都使用了 @import 作為導(dǎo)入的關(guān)鍵字。這里就會(huì)有一個(gè)問(wèn)題，因?yàn)?@import 在 CSS 中也有，于是就存在到底是將文件導(dǎo)入進(jìn)來(lái)還是僅僅作為一個(gè) CSS 的關(guān)鍵字輸出呢？
總體來(lái)說(shuō)有如下的規(guī)則：

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

特殊情況

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

同時(shí)這三大框架都支持 嵌套導(dǎo)入。部分支持 引用導(dǎo)入 和 內(nèi)聯(lián)導(dǎo)入，同時(shí) Less 的 @import 默認(rèn)是只導(dǎo)入一次的。

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

擴(kuò)展 Extends

簡(jiǎn)單說(shuō)一些 Extend 和 Mixin 的區(qū)別的吧，Mixin 就像是 copy/paste，每次執(zhí)行 Mixin ，都會(huì)在不同的 Rule 下面有相同的內(nèi)容，他們不會(huì)進(jìn)行復(fù)用。但是 Extend 會(huì)進(jìn)行復(fù)用，將相同的內(nèi)容提取出來(lái)，復(fù)用成一個(gè) Rule。

不過(guò)有一點(diǎn)很特殊的是， Less 竟然沒(méi)有 Extned。而且 Stylus 的 Extend 還是由 Sass 擴(kuò)展過(guò)來(lái)的，所以他們兩個(gè)基本相同，都使用 @extend 關(guān)鍵字。
而且 Sass 的 Extend 沒(méi)有什么太多的概念，我就一起來(lái)講了。

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

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

• Sass 通過(guò)將 #/. 替換為 %
• Stylus 通過(guò)在最前面添加 $ 來(lái)實(shí)現(xiàn)的，其實(shí)用這個(gè)也能彌補(bǔ) Stylus 沒(méi)有那種只定義不輸出的功能，只不過(guò)只能用于 Extend

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

其他指令 Other Directives

@css

• Stylus
  • 有的時(shí)候 Stylus 無(wú)法正確的處理 css 的選擇器，你可以將 css 屬性放入到 @css 標(biāo)簽內(nèi)。內(nèi)部的類都將作為普通的 css 來(lái)處理。

其他功能 Others

Error Handle

• Stylus
  • 支持自定義的錯(cuò)誤輸出，通過(guò) error 函數(shù)

Introspection

• Stylus
  • 允許 Mixin 和 Function 使用反射獲取對(duì)應(yīng)的信息

生態(tài) Community

Stylus

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

總結(jié)

不過(guò)總的來(lái)說(shuō)，這種預(yù)處理器估計(jì)是因?yàn)樘?jiǎn)單了吧，所以文檔寫的都很直接但是不深入，也沒(méi)有類似于編程語(yǔ)言的 Spec，只是給你簡(jiǎn)單介紹了一下例子以及如何使用。
很蛋疼。。。