跳到主要内容

概述

欢迎来到 Stylus 中文学习文档，这里提供了有关如何使用 Stylus 的指南，文档内容由 官方文档 翻译而来，想要学习更多编程相关的知识，欢迎访问 犀牛书 中文文档技术大全。

Stylus 是什么？​

Stylus 是 CSS 的一个扩展，也即 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;

再把分号省略怎么样？​

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 进行样式设计​

一旦您拥有 Node.js，安装 Stylus 就非常容易了。 因此，获取适用于您平台的二进制文件，并确保它们还包括 npm，Node 的包管理器。

现在，在终端中输入：

$ npm install stylus -g

如果您想要一个具有这些功能或下面列出的功能的 nodejs 的表现力强的 css 语言，请前往   GitHub 获取更多信息。

Stylus 特性​

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