CSS 需要英雄

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

如果我们省略大括号？

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

那分号了？

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

到此为止？除去冒号

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

让事情更简洁

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

混合书写又如何？

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

创建与分享

  1. @import 'vendor'
  3. body
  4.   font 12px Helvetica, Arial, sans-serif
  6. a.button
  7.   border-radius 5px

甚至使用函数!

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

如果所有都是可选的又将怎样？

  1. fonts = helvetica, arial, sans-serif
  3. body {
  4.   padding: 50px;
  5.   font: 14px/1.4 fonts;
  6. }

获取、安装Stylus

  1. $ npm install stylus

如果你已经迫不及待想尝试这些功能，赶紧去GitHub查看。

功能

  • 冒号可选
  • 分号可选
  • 逗号可选
  • 括号可选
  • 变量
  • 插值
  • 混合
  • 算术
  • 强制类型转换
  • 动态导入
  • 条件语句
  • 迭代
  • 嵌套选择
  • 父级引用
  • 变量函数调用
  • 词法作用域
  • 内置函数 （> 25）
  • 内部语言函数
  • 压缩可选
  • 图像内联可选
  • 可执行Stylus
  • 健壮的错误报告
  • 单行和多行注释
  • CSS 字面量
  • 转义字符
  • TextMate 捆绑
  • …