stylus中文版参考文档之综述

CSS需要有个巴神

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

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

冒号，你妈看你回家吃饭

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

来点干货

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)

明显的混合书写又如何？

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

创建与分享

@import 'vendor'

body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  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 install stylus