當初我們是這么寫的：
~~~
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
~~~
而今，用stylus可以省略花括號“{ }”了：
~~~
body
font: 12px Helvetica, Arial, sans-serif;
a.button
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
~~~
我懶，分號也不想寫！
可以的親，那就下面這樣：
~~~
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
~~~
我懶得沒救了，冒號也太麻煩！
嗯嗯，你漂亮，說什么都對。像這樣也行的：
~~~
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
~~~
好，這些滿足了我這個懶人的基本需求。對了，有沒有讓我不重復寫同樣代碼的功能？
主子，有的，你DRY一下哦：
~~~
/* 定義可復用代碼塊 */
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius(5px)
~~~
咿呀，這不是js嗎？怎么跑到css代碼中來了？乖乖，怪胎了，別扭！！
555，好吧，你不想寫圓括號，沒關系，不寫就是，中間空格一下就哦了：
~~~
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius 5px
~~~
嘛呀，Mixins啊，我最喜歡你這樣了，呵呵。
我是暖男，帶你飛～～ 你可以這樣飛哦：
~~~
//導入Mixins
@import 'vendor'
body
font 12px Helvetica, Arial, sans-serif
a.button
//使用Mixins
border-radius 5px
~~~
有了翅膀，還可以這樣飛：
~~~
// 定義函數
sum(nums...)
sum = 0
sum += n for n in nums
sum(1 2 3 4)
// => 10
~~~
這樣飛：
~~~
// 定義變量
fonts = helvetica, arial, sans-serif
body {
padding: 50px;
font: 14px/1.4 fonts;
}
~~~
我要飛得更高，飛得更高……
NPM全局安裝stylus：
~~~
$ npm install stylus -g
~~~
> 此神器可以裝逼，亦可提高效率。請謹慎使用！
作者：Shellway Ho
轉載請注明出處：http://www.hmoore.net/shellway/css-kinds
