關於stylus
stylus是css的預處理框架，是以.styl為字尾的檔案，可以建立健壯的，動態的富有表現的css。它用來為css增加一些程式設計的特性，比如在css中可以使用變數，函式等程式語言的特性，從而是css更加的簡潔，適應性更強，程式碼也更加的直觀易懂。在寫程式碼的時候發現stylus有個特點，程式碼風格有點像python，特別簡潔不需要大括號，分號什麼的並且也是用空格來規範格式。安裝
使用stylus首先需要安裝，當然這也是一個比較簡單的事情，安裝stylus只需要一個簡單的命令nmp install -g stylus（這是在你安裝好了nodejs並且配置好了環境變數情況下，安裝和配置nodejs可以去網上查詢一下，很簡單這裡就不多講）。安裝好了後使用stylus --version檢視是否安裝成功。簡單的使用stylus
首先建立style.styl檔案編寫一段簡單的stylus的程式碼
bgc = red
$border-radius(arg)
-webkit-border-radius: arg
-moz-border-radius: arg
border-radius: arg
*
margin 0
padding 0
.box
height 100
width 100
background-color bgc
border-radius(2px)
.content
background-color bgc
h1
color white
&:hover
color green使用命令stylus -w style.styl -o style.css將檔案style.styl檔案編譯成並輸出成css檔案，編譯後生成的css程式碼如下
* {
margin: 0;
padding: 0;
}
.box {
height: 100;
width: 100;
background-color: #f00;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.box .content {
background-color: #f00;
}
.box .content h1 {
color: #fff;
}
.box .content h1:hover {
color: #008000;
}
是不是感覺寫css簡單了許多，寫一個styl檔案再編譯生成的css檔案效率高多了。
下面我們在來分析一下這段程式碼
變數
bgc = red
background-color bgc這段程式碼宣告瞭變數bgc，並且為變數賦值為red。在需要用到相同顏色的地方可以
直接使用這個變數.
前面有兩處背景顏色為red，直接使用變數，當需要改變顏色時不需要一個個的改，
只需要改變變數的值就可以了。函式
$border-radius(arg)
-webkit-border-radius: arg
-moz-border-radius: arg
border-radius: arg
$border-radiius(2px)這段程式碼宣告瞭函式，並且接收了引數arg.在使用時只需要像上面的程式碼那樣輸入函式名稱
和引數就可以設定css屬性。引數不一定要傳入的，根據程式碼的情況跟其他語言都差不多。選擇器
.box
height 100
width 100
background-color bgc
border-radius(2px)
.content
background-color bgc
h1
color white
&:hover
color green這段程式碼被編譯成.box {
height: 100;
width: 100;
background-color: #f00;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.box .content {
background-color: #f00;
}
.box .content h1 {
color: #fff;
}
.box .content h1:hover {
color: #008000;
}在元素裡面寫樣式的時候是使用一個tab鍵縮排來體現是屬於該元素的樣式。寫.box 的子元素.content的樣式不需要在像寫css那樣重新去寫，只需要在.box下使用縮排來體現元素.content是.box的子元素然後在寫.content的樣式就可以。是不是感覺喜歡上了stylus了。
在上面的這段stylus的程式碼使用了一個&符號，這個&符號根據編譯出來的程式碼可以很容易理解，它會指向最近的父級元素並且與他連線。
@規則
@import匯入檔案.styl，任何.css擴充套件檔案將作為字面量,stylus樣式作為動態匯入的。
@import "reset.css"@css{} {}裡面的不會被編譯
@block{} 作為一個塊賦值給一個變數
@media 和在css使用的方法相同
@keyframe 編譯的時候轉換成@-webkit-keyframes,可以通變數來新增字首