富有表现力，动态，强大的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

保持整洁

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)

让混合（mixin）变得透明怎么样？

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;
}

用 Stylus 书写样式

安装 Stylus 很简单，前提是你已经安装了 Node.js。 到 Node.js 官网下载适合你的操作系统的安装包安装即可。还要检查一下 npm 是否也一并安装了。

然后，在命令行中执行如下指令：

$ npm install stylus -g

如果你希望在 Node.js 平台上让 css 编程语言更有表现力并且具有如下这些特性，请进入 Stylus GitHub 了解更多信息。

特性

  • 可选冒号
  • 可选的冒号
  • 可选的逗号
  • 可选的牙套
  • 变量
  • 插值（Interpolation）
  • 混合（Mixin）
  • 数学计算
  • 强制类型转换
  • 动态导入
  • 条件语句
  • 迭代
  • 嵌套选择器
  • 父级引用
  • 变量函数调用
  • 词法作用域
  • 内置函数（超过60个）
  • 语言功能
  • 可选压缩
  • 可选图像内联
  • Stylus可执行
  • 强大的错误报告
  • 单行和多行注释
  • CSS 字面量
  • 字符转义
  • TextMate包
  • 以及更多！
Stylus on GitHub