浅谈stylus与sass的对比
all we konw , 这两个都是css的预编译工具，但虽然都是编译工具，但还是存在差别的,下面来讲讲其中的区别
1、变量
sass定义变量是以这种形式进行定义的$xxx:10;而stylus的定义方式更加接近
stylus的定义方式跟javascript的表达方式一样(对于写js的人来说可能更为直观)
p.s 在sass里面，如果有全局变量， 局部变量都同名的话， 局部变量会覆盖全局变量
------------- sass1 -----------------
$white :#fff body{ $white : #ccc; color : $white } .nav{ color : $white }
------------ sass 1 ------------------
------------- sass2 -----------------
$white :#fff
//加上了！global 属性之后,上一行这个$white :#fff删掉也不会报错。 !global 在sass3.3及以后的版本才实现
body{
$white : #ccc !global; //这样子写的话就算没有第一行的#fff 亦不会编译错误，因为!global 指定这个变量为全局变量了,
color : $white
}
.nav{
color : $white
}
------------ sass 2 ------------------
---------------- 输出 -----------------
body{ color : #ccc; } .nav{ color : #ccc; }
stylus的话变量的作用域比较好，同一层级的同一个变量才会覆盖，不同层级（如下面的代码）不存在覆盖的风险
------------- stylus -----------------
white = #fff body{ white = #ccc; color : white } .nav{ color : white } ---------------- 输出 ----------------- body{ color : #ccc } .nav{ color : #fff }
2、继承，两这的继承方式以及结果都是一样的，都是通过@extend .xxxx的方式进行继承：
生成的代码如下 ：
p.s : 假设在上面未编译的代码中间有N行,其中某一行也对p的margin进行改动的话，编译出来的p的样式会以最后那次对p的改动为准（这个是我觉得不太好的地方，没准那一天真有人加了那么一行，样式就错了）,但是在less里面就不是这样子了，生成的结果是，在p ul ，ol的样式里面包含这.block的样式
另外再说一点 ：sass不支持嵌套的继承:
------------------------------- sass ----------------------
form button padding: 6px a.button @extend form button
------------------------------- sass ----------------------
Syntax error: Can't extend form button: can't extend nested selectors // 解析错误： 无法继承自 button: 不能继承嵌套选择器 on line 6 of standard input Use --trace for backtrace.
Stylus中，只要选择器匹配，就可以生效：
------------------------------- stylus ----------------------
form input[type=text] padding: 5px border: 1px solid #eee color: #ddd textarea @extends form input[type=text] padding: 10px
------------------------------- stylus ----------------------
生成：
form input[type=text],
form textarea {
padding: 5px;
border: 1px solid #eee;
color: #ddd;
}
textarea {
padding: 10px;
}
3、函数
在stylus里面 定义一个函数的话比较简单vender(args...) , vender(type=padding,n = 5px) 简单来说就是随便写个名字然后加一个括号就完事了，但它有一点跟javascript很类似，就是可以在这个函数体里面使用arguments对象，这个是sass，less都无法提供的。
在sass里面，定义函数的话一般都用@mixins xxx($parent,$n) ，@mixins xxx{}参数必须是以$开头才可以,而且函数里面能取到的参数只有函数形参数上的个数，超过的就忽略了
4、判断语句 ：
stylus的判断语句跟coffee-script很类似，用到unless
disable-padding-override = true
padding(args...)
unless disable-padding-override is defined and disable-padding-override //第一种用法
padding(x, y)
margin y x
negative(n) //第二种用法
unless n is a 'unit' //unit是数字的意思
error('无效数值')
if n < 0
yes
else
no
body padding 5px 10px
想对而言， sass的语法更为简介易懂一点,个人比较喜欢这点：
$lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } }
5、for循环
这两者的循环中取数的方式不一样，sass用的是类似与模板的功能，而stylus里面基本上跟javascript一致
-------------------sass ------------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; } //for循环里头需要通过#{$xxx}的方式取到for上面$i的值，这个写法虽然复杂，但是容易区分。
}
--------------------- stylus ---------------
body fonts = Impact Arial sans-serif for font, i in fonts foo i font //for循环里面直接就能取到循环上面的数值，这个稍微会直接点
后续还有很多不同的点，需要的话可以点击下以下两个连接来了解更多：
http://www.w3cplus.com/sassguide/syntax.html
http://www.zhangxinxu.com/jq/stylus/
总结下两者：
sass的编译更接近与css的原生的方式来写，stylus的方式比较接近coffee-script , 实现出来的效果虽然也有细微的差异，看个人情况使用吧；
我自己的话还是喜欢用sass，因为写习惯了js，觉得sass的语法跟平常日常使用的技术都比较相关（比如for循环的#{$i},比如$aaa : xxx） 看起来更容易上手。个人感觉stylus用法上有点累赘，不过对与写过coffee-scirpt 的人来说也是一种不错的选择。
