作者:blue(又名一書and一世界) 我的github
**用途: **CSS預處理語言stylus初學者入門
傳送門：

• stylus預處理入門(一)--選擇器

變量(variables)

變量的標識符可以由$、下劃線、字母、數字組成，其中數字不能作為變量的開頭。其實這里的變量只是理解為單純的字符替換

外部定義變量：

_font-size = 14px
font = _font-size "Lucida Grande", Arial

body
  font font, sans-serif

轉化：

body {
  font: 14px "Lucida Grande", Arial, sans-serif;
}

下面是變量的另外一種用法，不在外部定義變量:

• 內部重新定義當前變量

 #logo
   width: w = 150px
   height: h = 80px
   margin-left: (w / 2)
   margin-top: (h / 2) /*注意括號一定要加上*/

轉化：

#logo {
  width: 150px;
  height: 80px;
  margin-left: 75px;
  margin-top: 40px;
}

• 使用內部變量

 #logo
   width: w = 150px
   height: h = 80px
   margin-left: (@width / 2)
   margin-top: (@height / 2) /*注意括號一定要加上*/

轉化：

#logo {
  width: 150px;
  height: 80px;
  margin-left: 75px;
  margin-top: 40px;
}

變量的深入用法：寫在mixins里，與分支結構配合定義初始屬性值等。

  position()
    position: arguments
    z-index: 1 unless @z-index /*這里是mixins，如果不懂可以先忽略。*/

  #logo
    z-index: 20
    position: absolute

  #logo2
    position: absolute

轉化：

#logo {
  z-index: 20;
  position: absolute;
}
#logo2 {
  position: absolute;
  z-index: 1;
}

變量冒泡查詢

先看一個栗子：

   body
    color: red
    ul
      li
        color: blue
        p
            color:black
            a
                background-color: @color

轉化：

body {
  color: #f00;
}
body ul li {
  color: #00f;
}
body ul li p {
  color: #000;
}
body ul li p a {
  background-color: #000;
}

注：從當前層開始，一直往上層查詢，直到找到為止，找不到則返回null。上面例子中選擇器"body ul li p"就定義了color屬性了，而且選擇器a被"body ul li p"嵌套的。所以查詢到了上層的color屬性，停止查詢。

QUOTE: If you are not moving ahead , you are falling behind.