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	@mixin+@include	直接調用	直接調用
實現方式	基於javascript，客戶端	基於ruby，服務端