stylus

Stylus 安装使用

Stylus 安装使用

说明 What & Why

我们已经有了 less 和 sass ， 为什么要有另一个 Stylus？

因为简洁的语法更讨人喜欢

接下来是一个例子：

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

安装 How

要求

  • 最新版本的 nodejs
  • 这里默认使用的 Mac OS 10.9

开始安卓

$ npm install -g stylus

测试下是否成功

$ stylus --version
0.41.3

使用

编译并监控文件修改

# 监控并编译 xx.styl编译完后会在同一个目录下生成一个xx.css文件
$ stylus -w xx.styl

使用 import 调用外部库

nib 是一个跨浏览器css3混合类生成器

安装：

$ npm install -g nib

命令

$ stylus -w -u nib xx.styl

同时 xx.styl文件中添加 @import ‘nib’