學習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就是來方便咱們的。