前言：CSS預處理語言
CSS預處理語言可為CSS增加更多編程特性，以CSS作為目標生成文件。
這些語言可有效提高編程效率，使CSS更加簡潔、適應性更強、可讀性更加，並使項目更易於維護。
本文將在開發者角度使用表格橫向對比的方式客觀分析目前主流的CSS預處理語言LESS、Scss、Stylus的異同之處。
不介紹這些語言的安裝、編譯等內容。默認讀者已熟悉CSS並可能已用過以上至少一種CSS預處理語言。
鑒於目前Sass語言有分別以“.sass”和“.scss”為文件名后綴的兩套語法規則，本文只介紹Sass3之后的版本，即以Scss表示。
基本差別
| LESS | Scss | Stylus/staɪləs/ | |
|---|---|---|---|
| 后綴名 | *.less | *.scss | *.styl |
| 編譯方法 | 均可以通過各自方式在本地編譯成*.css文件 有很多第三方編譯工具可以將這些格式的文件編譯為*.css文件 |
||
| 特別項 | 可以在HTML文件中引入less.js文件與像引入*.css文件一樣的方式引入*.less文件，通過瀏覽器進行編譯（可能損耗一點點性能）。 | 需要先安裝Ruby | |
基本語法
| LESS | Scss | Stylus |
|---|---|---|
/*均支持CSS風格語法*/ h1{ color:#000; } |
||
| 不支持 | /*支持不包含花括號與分號的編寫風格，僅通過縮進表示嵌套*/ h1 color: #000 |
|
| 不支持 | /*支持省略冒號*/ h1 color #000 |
|
變量與作用域
| LESS | Scss | Stylus |
|---|---|---|
/*以“@”開頭*/ @maxWidth:1024px; |
/*以“$”開頭*/ $maxWidth:1024px; |
/*可以以“$”開頭，也可無前綴符號直接聲明變量*/ maxWidth=1024px; |
| 定義變量時，以冒號“:”分隔變量名與變量值 | 以“=”分隔變量名與變量值 | |
| 與其它語言作用域概念雷同，向上冒泡查找變量 | 無全局變量的概念，后定義的同名變量會完全覆蓋先定義的變量 | 同LESS |
混合（Mixins）
Mixins是CSS預處理器中語言中最強大的特性。
Mixins可以將一部分需重用的樣式抽出，只需定義一次，就可被很多選擇器重復使用。
| LESS | Scss | Stylus |
|---|---|---|
| 可以無需特別聲明，直接調用某一class或id選擇器名即可重用該選擇器內屬性 | 定義混合需要以“@mixin”開頭。引用混合需要以“@include” 開頭 | 無需前綴 |
| 均可定義參數與設置參數默認值 | ||
/*聲明混合*/ .setColor(@mainC:#000){ color:@mainC; } /*直接以默認值調用混合*/ .sBox{ .setColor(); } /*調用混合且傳入自定義參數值*/ .bBox{ .setColor(#fff); } |
/*聲明混合*/ @mixin setColor($mainC:#000){ color:$mainC; } /*直接以默認值調用混合*/ .sBox{ @include setColor(); } /*調用混合且傳入自定義參數值*/ .bBox{ @include setColor(#fff); } |
/*聲明混合*/ setColor(mainC=#000){ color:mainC; } /*直接以默認值調用混合*/ .sBox{ setColor(); } /*調用混合且傳入自定義參數值*/ .bBox{ setColor(#fff); } |
/*編譯成CSS后*/ .sBox{ color:#000; } .box{ color:#fff; } |
||
嵌套實現后代選擇器
| LESS | Scss | Stylus |
|---|---|---|
| 嵌套語法是相同的，可以通過大括號“{}”之間的層次關系實現嵌套。也可以使用“&”符號來引用父選擇器。 | ||
div{ margin:10px 5px; a{ color:red; &:hover{ color:blue; } } } |
||
div{ margin:10px 5px; } div a{ color:red; } div a:hover{ color:blue; } |
||
繼承
| LESS | Scss | Stylus |
|---|---|---|
| 無需明確的前綴 | 使用“@extend”開始，后面緊跟被繼承的選擇器 | |
/*繼承示例*/ .block{ display:block; margin:10px; } p{ .block; padding:5px; } |
/*繼承示例*/ .block{ display:block; margin:10px; } p{ @extend .block; padding:5px; } |
|
/*編譯成CSS，相同樣式依舊會在每個選擇器中重復出現*/ .block{ display:block; margin:10px; } p{ display:block; margin:10px; padding:5px; } |
/*編譯成CSS，相同樣式會被合並*/ .block,p{ display:block; margin:10px; } p{ padding:5px; } |
|
條件語句
| LESS | Scss | Stylus |
|---|---|---|
| 使用關鍵字“when”實現條件語句 | 可以使用@if、@else、@else if語句實現判斷 | 與其它編程語言類似，不過可以省略大括號 |
@type: link; .mixin(@type) when ( @type == link ){ color:blue; } .mixin(@type) when not ( @type == link ){ color:black; } |
$type: link; p { @if $type == link { color: blue; } @else { color: black; } } |
type: link; p{ if type==link color:blue; else color:black; } |
/*編譯后的CSS*/ p {color:blue;} |
||
循環語句
| LESS | Scss | Stylus |
|---|---|---|
| 通過when模擬循環功能 | 使用@for關鍵字，配合“from”和“through” | 使用for/in對表達式進行循環 |
.funClass (@i) when (@i>0){ .item-@{i}{ width:2em*@i; } /*遞歸*/ .funClass(@i-1); } /*停止循環*/ .funClass (0) {} /*輸出*/ .funClass (3); |
@for &i from 1 through 3{ .item-#{$i} { width:2em*$i; } } |
for i in 1 2 3 .item-{i} width 2em*i |
/*編譯后的CSS*/ .item-1{ width:2em; } .item-2{ width:4em; } .item-3{ width:6em; } |
||
| 還支持each循環語句、while循環語句 | ||
綜合對比
- 均具有“變量”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性；
- Scss和LESS語法較為嚴謹，LESS要求一定要使用大括號“{}”，Scss和Stylus可以通過縮進表示層次與嵌套關系；
- Scss無全局變量的概念，LESS和Stylus有類似於其它語言的作用域概念；
- Scss和Stylus就具有類似其它語言的條件語句、循環語句等，而LESS需要通過When等關鍵詞模擬這些功能；
- Sass是基於Ruby語言的，而LESS和Stylus可以基於NodeJS NPM下載相應庫后進行編譯；
- 使用LESS時，還可以在引用它的HTML文件中引入從官網下載的“less.js”文件，就可以通過瀏覽器進行解析。