當初我們是這么寫的:
~~~
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