為何要做CSS Pre-processors?
沒有人做吃力不討好的工作嘛，有了多種不同的CSS Pre-Processors那么代表着它們一定帶來了不同好處，問題是，帶來了什么好處呢？最吸引開發者的好處是什么？它們有什么異同呢？如果公司做技術選型的時候最好選擇哪一種呢？
好處
- 瀏覽器前綴處理
- 復用的效率提升
- 變量
- mixin
- 嵌套書寫，不用寫重復的選擇器
三個最知名的工具
- SASS
- SASS中文文檔
- SASS中文參考手冊
- 2007年誕生，最早
- ruby社區支持
- 基於Ruby開發（gem install sass）
- LESS
- 2009年誕生
- CSS語法
- 基於JS開發（npm install less）
- Twitter Bootstrap使用
- 問題：比起SASS的編程部分比較弱
- LESS中文
- Stylus
- 2010年誕生
- 基於JS開發（npm install stylus）
- 人氣遠不如SASS和LESS
- 極客學院Stylus教程
簡單比較
| Features | SASS | Less | Stylus |
|---|---|---|---|
| 變量 | $開頭 | @開頭 | 變量和值之間用等號 |
| 學習成本 | 中等 | 相近CSS，最小 | 中等 |
| 語法 | 縮進式(3.0+支持{}) | {} | ？ |
| 作用域 | 沒有全局變量 | 向上查找 | 向上查找 |
| mixin | @mixin+@include | 直接調用 | 直接調用 |
重點特性
mixin
sass
申明：@mixin
調用：@include
/*聲明一個Mixin叫作“error”*/
@mixin error($borderWidth:2px){ border:$borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { @include error();/*直接調用error mixins*/ } .login-error { @include error(5px);/*調用error mixins，並將參數$borderWidth的值重定義為5px*/ } less
申明：對比sass，申明沒有@mixin
調用：對比sass，調用沒有@include
/*聲明一個Mixin叫作“error”*/ .error(@borderWidth:2px){ border:@borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { .error();/*直接調用error mixins*/ } .login-error { .error(5px);/*調用error mixins，並將參數@borderWidth的值重定義為5px*/ } stylus
申明：對比less，申明的時候沒有‘.’
調用：直接函數調用
/*聲明一個Mixin叫作“error”*/ error(borderWidth=2px){ border:borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { error();/*直接調用error mixins*/ } .login-error { error(5px);/*調用error mixins，並將參數$borderWidth的值重定義為5px*/ } 繼承
sass && stylus
調用：@extend
生成代碼：它是在父親上直接把子選擇器加上，所以代碼沒有冗余
.block { margin: 10px 5px; padding: 2px; } p { @extend .block;/*繼承.block選擇器下所有樣式*/ border: 1px solid #eee; } ul,ol { @extend .block; /*繼承.block選擇器下所有樣式*/ color: #333; text-transform: uppercase; } less
調用：直接
生成代碼：它是copy的孩子的屬性中，所以產生了冗余
.block { margin: 10px 5px; padding: 2px; } p { .block;/*繼承.block選擇器下所有樣式*/ border: 1px solid #eee; } ul,ol { .block; /*繼承.block選擇器下所有樣式*/ color: #333; text-transform: uppercase; } 顏色函數
sass
lighten($color, 10%); /* 返回的顏色在$color基礎上變亮10% */ darken($color, 10%); /* 返回的顏色在$color基礎上變暗10% */ saturate($color, 10%); /* 返回的顏色在$color基礎上飽和度增加10% */ desaturate($color, 10%); /* 返回的顏色在$color基礎上飽和度減少10% */ grayscale($color); /* 返回$color的灰度色*/ complement($color); /* 返回$color的補色 */ invert($color); /* 返回$color的反相色 */ mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/ saturate($color, $amount) desaturate($color, $amount) lighten($color, $amount) darken($color, $amount) adjust-hue($color, $amount) opacify($color, $amount) transparentize($color, $amount) mix($color1, $color2[, $amount]) grayscale($color) complement($color) less
lighten(@color, 10%); /* 返回的顏色在@color基礎上變亮10% */ darken(@color, 10%); /* 返回的顏色在@color基礎上變暗10%*/ saturate(@color, 10%); /* 返回的顏色在@color基礎上飽和度增加10% */ desaturate(@color, 10%); /* 返回的顏色在@color基礎上飽和度降低10%*/ spin(@color, 10); /* 返回的顏色在@color基礎上色調增加10 */ spin(@color, -10); /* 返回的顏色在@color基礎上色調減少10 */ mix(@color1, @color2); /* 返回的顏色是@color1和@color2兩者的混合色 */ saturate(@color, @amount) desaturate(@color, @amount) lighten(@color, @amount) darken(@color, @amount) fadein(@color, @amount) fadeout(@color, @amount) fade(@color, @amount) spin(@color, @amount) mix(@color1, @color2, @weight) grayscale(@color) contrast(@color) stylus
lighten(color, 10%); /* 返回的顏色在'color'基礎上變亮10% */ darken(color, 10%); /* 返回的顏色在'color'基礎上變暗10% */ saturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度增加10% */ desaturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度降低10% */ red(color) green(color) blue(color) alpha(color) dark(color) light(color) hue(color) saturation(color) lightness(color) if
sass
.mixin (@color) when (lightness(@color) > 30%) { background-color: black; } .mixin (@color) when (lightness(@color) =<; 30%) { background-color: white; } less
@if lightness($color) > 30% { background-color: black; } @else { background-color: white; } stylus
if lightness(color) > 30% background-color black else background-color white for && loop
sass
@for $i from 1px to 3px { .border-#{i} { border: $i solid blue; } } less
.loop(@counter) when (@counter > 0){ .loop((@counter - 1)); .border-@{counter} { border: 1px * @counter solid blue; } } stylus
for num in (1..3) .border-{num} border 1px * num solid blue 導入
@import
原始文件
/* file.{type} */ body { background: #EEE; } 引用
@import "reset.css"; @import "file.{type}"; p { background: #0982C1; } & 選擇父親
section { margin:10px; nav { height:25px; a { color:#0982c1; &:hover { text-decoration:underline; } } } } Sass VS Scss
- Sass是（Syntactically Awesome StyleSheets），后綴
.sass文件 - Scss是（Sassy CSS），后綴
.scss文件
all features are available for both syntaxes
- Scss兼容CSS，語法類似，Less的學習和入手優勢被抵消掉了
- CSS文件，直接就是合法的Scss文件
- Scss可以轉化為Sass，相對容易
- Scss和Sass在功能上基本能做到1：1映射
結論
如果喜歡原生的CSS語法，選擇less比較好上手，stylus用的人數不足，但是它其實部分兼容sass和less的開發者群體，一個全新的項目嘗試一下新事物也沒有問題，如果喜歡更強的功能那么就scss（變量作用域有點兒蛋疼）走起吧。
中國的互聯網團隊，用less稍微多點（知乎搜索的結果來看），國外的sass用戶更多，而且文檔、樣例更加豐富。