CSS的预处理框架stylus学习教程

stylus介绍

是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。

Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

Stylus功能上更为强壮，和js联系更加紧密。所以我选择 Stylus，SASS 玩儿过一段时间，主要是这玩意依赖ruby运行，所以我放弃使用了。
Stylus安装

全局安装，安装之前你需要你安装 nodejs 这个怎么安装搜去哦。

复制代码代码如下:$ npm install stylus -g

这样就算是安装完Stylus了，也可以正常使用Stylus。

复制代码代码如下:Usage: stylus [options] [command] [< in [> out]] [file|dir …]Commands:
help <prop> Opens help info for <prop> in
your default browser. (OS X only)
Options:</p>
<p> -u, –use <path> Utilize the stylus plugin at <path>
-i, –interactive Start interactive REPL
-w, –watch Watch file(s) for changes and re-compile
-o, –out <dir> Output to <dir> when passing files
-C, –css <src> [dest] Convert CSS input to Stylus
-I, –include <path> Add <path> to lookup paths
-c, –compress Compress CSS output
-d, –compare Display input along with output
-f, –firebug Emits debug infos in the generated css that
can be used by the FireStylus Firebug plugin
-l, –line-numbers Emits comments in the generated CSS
indicating the corresponding Stylus line
-V, –version Display the version of Stylus
-h, –help Display help information

生成CSS
命令行中

建立一个stylusExample/，再在里面建立 src 目录专门存放 stylus 文件，在里面建立 example.styl 文件。然后在 stylusExample 目录下面执行下面命令

复制代码代码如下:$ stylus –compress src/

输出compiled src/example.css ，这个时候表示你生成成功了，带上–compress参数表示你生成压缩的CSS文件。

$ stylus –css css/example.css css/out.styl CSS转换成styl
$ stylus help box-shadow CSS属性的帮助
$ stylus –css test.css 输出基本名一致的.styl文件
grunt生成

grunt生成 就比较爽歪歪了，具体grunt怎么玩儿，俺写了个教程Grunt教程-前端自动化 可以学习以下。

stylusExample 目录下创建两个文件，这两个文件是grunt必备文件。