Stylus 入门

转译：https://stylus.bootcss.com/

stylus 富于表现力、动态的、健壮的 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 捆绑
• 以及更多！

目录

• 尝试一下
• 选择器
• 变量
• 插值
• 算子
• 混合
• 函数
• 关键字参数
• 内置功能
• 剩余参数
• 注释
• 条件语句
• 散列
• 迭代
• @IMPORT 和@REQUIRE
• @MEDIA 媒体查询
• @FONT-FACE 自定义字体
• #@KEYFRAMES 动画
• 其他@规则
• @viewport, @page, @host, @supports
• @EXTEND 扩展
• @BLOCK 块
• URL()
• CSS 字面量
• CSS样式语法
• 字符转码
• 可执行文件
• 错误报告
• 连接中间件
• INTROSPECTION API
• JAVASCRIPT API
• 源代码

Created by TJ Holowaychuk.

转译：https://stylus.bootcss.com/

明天的你一定会感谢现在拼命的自己！