Stylus 中文网

Appearance

Return to top
On this page

富有表现力、动态、强大的 CSS

¥Expressive, dynamic, robust CSS

CSS 需要一个英雄

¥CSS needs a hero

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;
}

如果我们可以省略大括号？

¥What if we could omit braces?

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;

省略分号？

¥How about semi-colons?

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

保持清爽

¥Keep things DRY

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)

使混入透明？

¥How about transparent mixins?

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

创建并共享

¥Create & Share

@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

甚至语言内函数！

¥Even in-language functions!

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

如果这一切都是可选的？

¥What if it were all optional?

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 编写样式

¥Get styling with Stylus

拥有 Node.js 后，安装 Stylus 就非常容易了。因此，获取适合你平台的二进制文件，并确保它们还包含 npm（Node 的包管理器）。

¥Installing Stylus is very easy once you have Node.js. So get the binaries for your platform and make sure that they also include npm, Node's package manager.

现在，在你的终端中输入：

¥Now, type in your terminal:

$ npm install stylus -g

$ npm install stylus -g

如果你想要一种具有这些功能或下面列出的功能的 Nodejs 富有表现力的 css 语言，请前往 GitHub 了解更多信息。

¥If you want an expressive css language for nodejs with these features or the features listed below, head over to  GitHub for more information.

特性汇总

¥Features

  • 可选的冒号

    ¥Optional colons

  • 可选的分号

    ¥Optional semi-colons

  • 可选的逗号

    ¥Optional commas

  • 可选的大括号

    ¥Optional braces

  • 变量

    ¥Variables

  • 插值法

    ¥Interpolation

  • 混入

    ¥Mixins

  • 算术

    ¥Arithmetic

  • 类型强制

    ¥Type coercion

  • 动态导入

    ¥Dynamic importing

  • 条件句

    ¥Conditionals

  • 迭代

    ¥Iteration

  • 嵌套选择器

    ¥Nested selectors

  • 父引用

    ¥Parent referencing

  • 变量函数调用

    ¥Variable function calls

  • 词汇范围

    ¥Lexical scoping

  • 内置函数（超过 60 个）

    ¥Built-in functions (over 60)

  • 语言内函数

    ¥In-language functions

  • 可选的压缩

    ¥Optional compression

  • 可选的图片内联

    ¥Optional image inlining

  • Stylus 可执行文件

    ¥Stylus executable

  • 强大的错误报告

    ¥Robust error reporting

  • 单行和多行注释

    ¥Single-line and multi-line comments

  • 那些棘手时刻的 CSS 字面量

    ¥CSS literal for those tricky times

  • 字符转义

    ¥Character escaping

  • TextMate 打包

    ¥TextMate bundle

  • 以及更多！

    ¥and more!