Stylus富有表现力、动态且强大的 CSS
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;
}
如果我们可以省略大括号呢？
stylus
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;
如何省略分号？
stylus
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
保持代码 DRY（不重复）
stylus
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)
如何使用透明混合器？
stylus
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
创建与分享
stylus
@import 'vendor'
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
甚至支持语言内函数！
stylus
sum(nums...)
sum = 0
sum += n for n in nums
sum(1 2 3 4)
// => 10
sum(nums...)
sum = 0
sum += n for n in nums
sum(1 2 3 4)
// => 10
如果这一切都是可选的呢？
stylus
fonts = Helvetica, Arial, sans-serif
body {
padding: 50px;
font: 14px/1.4 fonts;
}
fonts = Helvetica, Arial, sans-serif
body {
padding: 50px;
font: 14px/1.4 fonts;
}
使用 Stylus 进行样式设计
安装 Stylus 非常简单，只需要先安装 Node.js。 获取适合你平台的二进制文件，并确保它们包含 npm（Node 的包管理器）。
现在，在你的终端中输入：
bash
$ npm install stylus -g
$ npm install stylus -g
如果你想要一种适用于 nodejs 的富有表现力的 css 语言， 具有这些特性或下面列出的特性，请前往 GitHub 获取更多信息。
特性
- 可选的冒号
- 可选的分号
- 可选的逗号
- 可选的大括号
- 变量
- 插值
- 混合器
- 算术运算
- 类型转换
- 动态导入
- 条件语句
- 迭代
- 嵌套选择器
- 父级引用
- 变量函数调用
- 词法作用域
- 内置函数（超过 60 个）
- 语言内函数
- 可选的压缩
- 可选的图像内联
- Stylus 可执行文件
- 强大的错误报告
- 单行和多行注释
- CSS 字面量（用于棘手情况）
- 字符转义
- TextMate 包
- 以及更多！