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;

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)

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

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

@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

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

fonts = Helvetica, Arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

使用 Stylus 进行样式设计

安装 Stylus 非常容易，只要您拥有 Node.js 即可。因此，获取适用于您平台的二进制文件，并确保其中还包括 npm，即 Node 的包管理器。

现在，在您的终端中键入

$ npm install stylus -g

$ npm install stylus -g

如果您想要一种带有这些功能或下面列出的功能的 Node.js 表达式 CSS 语言，请前往 GitHub 了解更多信息。

功能

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