Sass vs Less vs Stylus

	Less	Sass	Stylus
安装	npm install -g less,即可被编译成.css文件	先安装ruby，再安装sass：gem install sass。 四种编译风格。	npm install stylus
变量	使用@标识符，@border-color:#CCCCCC； @border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; } 作用域：Less有全局变量与局部变量	使用：$标识符。 $blue : #1875e7;　 div { 　color : $blue; } 变量需要写在字符串中时，必须写在#{}中 全是全局变量，到那时可以通过!default来改变值	直接指定变量：font-size = font-size = 14px body font font-size Arial, sans-seri 14px
插值	无	无	通过使用{}字符包围表达式来插入值，其会变成标识符的一部分 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
嵌套	#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; } 　　}
注释	“//”，单行注释，不能显示在编译后的css中；"/**/“多行注释	“//”，单行注释，不能显示在编译后的css中；"/**/“多行注释	//单行注释， /*               *多行注释                */ /*!               *多行缓冲注释               */
Mixin	在class中引入一个已经定义了的class，可带参数 // 定义一个样式选择器 .roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的样式选择器中使用 #header { .roundedCorners; } #footer { .roundedCorners(10px); } 只需在classB中根据classA的命名使用。	使用@Mixin命令定义，使用@include命令调用 　@mixin left { 　　　　float: left; 　　　　margin-left: 10px; 　　} div { 　　　　@include left; 　　}	border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n form input[type=button] border-radius(5px)
继承	无	允许一个选择器集成另一个选择器 。 .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
函数		@function double($n) { 　　　　@return $n * 2; 　　} 　　#sidebar { 　　　　width: double(5px); 　　} 有自定义函数	add(a, b) a + b body padding add(10px, 5)
实现方式	基于javascript，客户端	基于ruby，服务端

stylus与前两个与处理语言最大的不同是不适用{}，而改成使用缩进。