stylus 安装-编译

简介

css预处理器有Less、Sass（Scss）及Stylus；它们各自的背景如下:

Sass：2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。

Less：2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

Stylus：2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

stylus 安装

//git 全局安装
$ npm install -g stylus

运行stylus -h可以获得相关的命令行支持

stylus -h 帮助界面

自动编译

需要记住两个命令

1. -w 是自动监视文件
2. -o 是将编译后的CSS文件输出到指定文件中

例如我想要自动编译css/style.styl文件，只需要在命令行输入
$ stylus -w css/style.styl -o css/
此时修改css/style.styl文件就会得到编译后的 css/style.css文件
书写代码时只需要在css/style.styl文件中书写即可

最后

全面的 stylus 知识可以参考官方文档，或者张鑫旭翻译的中文文档 。

参考：https://www.jianshu.com/p/5fb15984f22d