Stylus概述

Stylus是一种动态CSS(层叠样式表)预处理器语言。

为什么使用Stylus

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 官方仓库了解更多信息吧。

Stylus 特性