Stylus两分钟入坑

下面中规中矩的CSS代码是否看得眼睛生茧了？

1
2
3
4
5
6
7
8
body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

好，去掉花括号

1
2
3
4
5
6
7
body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

去掉分号

1
2
3
4
5
6
7
body
  font: 12px Helvetica, Arial, sans-serif
  
a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

还有你冒号

1
2
3
4
5
6
7
body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  -webkit-border-radius 5px
  -moz-border-radius 5px
  border-radius 5px

来点函数

1
2
3
4
5
6
7
8
9
10
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)

加点混合书写

1
2
3
4
5
6
7
8
9
10
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

加点模块化

1
2
3
4
5
6
7
@import 'vendor'

body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  border-radius 5px

甚至是语言函数

1
2
3
4
5
6
sum(nums...)
  sum = 0
  sum += n for n in nums
  
sum(1 2 3 4)
// => 10

好了，你得到了Stylus