SASS VS LESS VS Stylus

爲什麼要作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用戶更多，並且文檔、樣例更加豐富。

參考

• 淺談css預處理器，Sass、Less和Stylus
• CSS 的預處理程序（Sass、LESS、Stylus 等）分別都有哪些優缺點？
• CSS預處理器——Sass、LESS和Stylus實踐
• Sass vs SCSS vs Less
• An Introduction to CSS Pre-Processors: SASS, LESS and Stylus