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必備文件。