富于表现力、动态的、健壮的 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 官方仓库 了解更多信息吧。
Stylus 特性
- 冒号可有可无
- 分号可有可无
- 逗号可有可无
- 括号可有可无
- 变量
- 插值(Interpolation)
- 混合(Mixin)
- 数学计算
- 强制类型转换
- 动态引入
- 条件表达式
- 迭代
- 嵌套选择器
- 父级引用
- Variable function calls
- 词法作用域
- 内置函数(超过 60 个)
- 语法内函数(In-language functions)
- 压缩可选
- 图像内联可选
- Stylus 可执行程序
- 健壮的错误报告
- 单行和多行注释
- CSS 字面量
- 字符转义
- TextMate 捆绑
- 以及更多!