css三大預處理器（Sass、Less和Stylus）一目了然

1.首先，什麼是預處理器呢？

A:CSS（Cascading Style Sheet-級聯樣式表） 預處理器是一種用來為 CSS 增加一些程式設計特性的語言，無需考慮浏覽器的相容性問題，例如你可以在 CSS 中使用變量、函數、簡單的程式邏輯等一些程式設計語言中的基本技巧，使得CSS 更為簡潔，适應性更強，代碼更直覺等諸多好處。

2.三種css預處理器的對比

對比	Less	Sass	Stylus
安裝方式	npm install -g less,即可被編譯成.css檔案	先安裝ruby，再安裝sass：gem install sass	npm install stylus
聲明變量	聲明變量用『@』開頭，其餘等同 Sass @border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; } 作用域：Less有全局變量與局部變量	聲明變量必須是『$』開頭，後面緊跟變量名和變量值，而且變量名和變量值需要使用冒号：分隔開 變量需要寫在字元串中時，必須寫在#{}中 全是全局變量，到那時可以通過!default來改變值	直接指定變量：font-size = 聲明變量沒有任何限定，結尾的分号可有可無，但變量名和變量值之間必須要有『等号』。但需要注意的是，如果用“@”符号來聲明變量，Stylus會進行編譯，但不會指派給變量。就是說，Stylus 不要使用『@』聲明變量。Stylus 調用變量的方法和Less、Sass完全相同
插值	無	無	通過使用{}字元包圍表達式來插入值，其會變成辨別符的一部分 vendor(prop, args) -webkit-{prop} args -moz-{prop} args {prop} args border-radius() vendor('border-radius', arguments) box-shadow() vendor('box-shadow', arguments) button border-radius 1px 2px / 3px 4px
運算	組織數值型value。提供加減乘除運算。 @init: #111111; @transition: @init*2; .switchColor { color: @transition; }	提供加減乘除運算。 body { 　　margin: (14px/2); 　　top: 50px + 100px; 　　right: $var * 10%; }	一進制運算符 二進制運算符 範圍”..", "..." 指數：** 相等與關系運算 真假 邏輯運算 存在操作：in
指派方式	通過  var-name: var-value;  的方式	與less一緻	Stylus 通過  =  指派的方式，類似于程式設計語言的程式設計方式
作用域	JS 一樣，逐級查找，向上冒泡	三者最差，不存在全局變量的概念。也就是說在 Sass 中定義了相同名字的變量時你就要小變态了	完全等同 Less。Stylus 和 Sass 則更傾向于指令式
嵌套	#home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; } #center{ border:outset; height : 300px; width : 90%; #left{ border:outset; float : left; width : 40%; } #right{ border:outset; float : left; width : 40%; } } } 跟html的嵌套類似	在嵌套代碼中，可以使用&引用父元素 a { 　&:hover { color: #ffb3ff; } }	雷同
繼承	這個方面Less 表現的稍微弱一些，更像是混入寫法	能把一個選擇器的所有樣式繼承到另一個選擇器上。使用『@extend』開始，後面接被繼承的選擇器 .class1 { 　　　　border: 1px solid #ddd; } .class2 { 　　　　@extend .class1; 　　　　font-size:120%; }	父級引用：混合書寫可以利用&繼承 stripe(even = #fff, odd = #eee) tr background-color odd &.even &:nth-child(even) background-color even table stripe() td padding 4px 10px table#users stripe(#303030, #494848) td color white
條件語句	無	if、if...else switch	if、if...else unless negative
循環語句	無	for while each	for/in Mixins使用循環 函數 if/unless
@import	Less 為@Import 擴充了文法	無	無
mixin	@[email protected]	直接調用	直接調用
實作方式	基于javascript，用戶端	基于ruby，服務端