學習Stylus

關於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,可以通變量來添加前綴

雖然文章寫得沒有那麼詳細，涉及的一些細節並沒有講到可以去看一些相關文檔，這些主要的會了去學習一些細節還是很快的，很多東西跟編程語言還是差不多的，畢竟stylus就是來方便我們的。