Sass和stylus的对比

① Sass使用的是标准的 CSS 语法，同时也支持老的语法，就是不包含花括号和分号的方式；Stylus 支持的语法要更多样性一点

h1 {
  color: #0982C1;
}

h1
  color: #0982C1;

h1
  color #0982C1

② sass变量必须是以$开头的，然后变量和值之间使用冒号隔开，和css属性是一样的；
stylus对变量是没有任何设定的，可以是以 $ 开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在stylus中不能用@开头

③ 在sass里面，如果有全局变量， 局部变量都同名的话， 局部变量会覆盖全局变量

$white :#fff
body{
    $white : #ccc;
    color : $white
}
.nav{
    color : $white
}
// 加上了！global 属性之后，$white :#fff 删掉也不会报错。 !global 在sass3.3及以后的版本才实现
body{
    $white : #ccc !global;  //这样子写的话就算没有第一行的#fff 亦不会编译错误，因为!global 指定这个变量为全局变量了
    color : $white
}
.nav{
    color : $white
}

// 输出
body{ color : #ccc; }
.nav{ color : #ccc; }

stylus的话变量的作用域比较好，同一层级的同一个变量才会覆盖，不同层级不存在覆盖的风险

white = #fff
body{ 
   white = #ccc;
   color : white
} 
.nav{ 
  color : white
}

body{ color : #ccc }   // 输出
.nav{ color : #fff }   // 输出

④ 继承方式以及结果都是一样的，都是通过 @extend .xxxx 的方式进行继承

.block {
  margin:10px;
}
p {
  @extend .block;
  color:#ccc;
}
// 编译后
.block, p {
  margin:10px;
}
p {
  color:#ccc;
}

sass不支持嵌套的继承

 button
    padding: 6px
 
a.button
  @extend form button
// Syntax error: Can't extend form button: can't extend nested selectors
// 解析错误： 无法继承自 button: 不能继承嵌套选择器 on line 6 of standard input Use --trace for backtrace.

Stylus中，只要选择器匹配，就可以生效

form
 input[type=text]
   padding: 5px
 textarea
   @extends form input[type=text]

// 编译后

form input[type=text],
form textarea {
  padding: 5px;
}

⑤ 在stylus里面定义一个函数的话比较简单 vender(args...) , vender(type=padding,n = 5px) 简单来说就是随便写个名字然后加一个括号就完事了，但它有一点跟 javascript 很类似，就是可以在这个函数体里面使用arguments 对象，这个是 sass，less 都无法提供的。

在sass里面，定义函数的话一般都用 @mixins xxx($parent,$n) ，@mixins xxx{} 参数必须是以$开头才可以,而且函数里面能取到的参数只有函数形参数上的个数，超过的就忽略了。