stylus--安裝及使用方法

stylus介紹

Stylus 是一個CSS的預處理框架，2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，所以 Stylus 是一種新型語言，可以創建健壯的、動態的、富有表現力的CSS。比較年輕，其本質上做的事情與 SASS/LESS 等類似，應該是有很多借鑒，所以近似腳本的方式去寫CSS代碼。

Stylus默認使用 .styl 的作為文件擴展名，支持多樣性的CSS語法。

Stylus功能上更為強壯，和js聯系更加緊密。

stylus文件后綴是 .styl

stylus安裝

   當然，首先你得安裝node.js運行環境

$ npm install -g stylus

運行stylus -h 可以獲得相關的命令行支持

 

 

自動化編譯

1. 新建src文件夾
2. 新建example.stly文件
3. 打開命令行界面
4. 輸入 stylus -w example.styl -o src
   -w 是自動監視文件 -o 是將編譯后的CSS文件輸出到指定文件中
5. 在example.styl里面寫內容，保存即可

6. 壓縮

7. $ 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文

8. 知道這些就夠了