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，服务端