Stylus 變量

變量(Variables)

變量

我們可以指定表達(dá)式為變量，然后在我們的樣式中貫穿使用：

font-size = 14px

body
  font font-size Arial, sans-seri

編譯為：

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

變量甚至可以組成一個(gè)表達(dá)式列表：

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

body
  font font sans-serif

編譯為：

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

標(biāo)識(shí)符（變量名，函數(shù)等），也可能包括$字符。例如：

$font-size = 14px
body {
  font: $font-size sans-serif;
}

屬性查找

Stylus有另外一個(gè)很酷的獨(dú)特功能，不需要分配值給變量就可以定義引用屬性。下面是個(gè)很好的例子，元素水平垂直居中對(duì)齊（典型的方法是使用百分比和margin負(fù)值），如下：

#logo
  position: absolute
  top: 50%
  left: 50%
  width: w = 150px
  height: h = 80px
  margin-left: -(w / 2)
  margin-top: -(h / 2)

我們不使用這里的變量w和h, 而是簡(jiǎn)單地前置@字符在屬性名前來(lái)訪問(wèn)該屬性名對(duì)應(yīng)的值：

#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

另外使用案例是基于其他屬性有條件地定義屬性。在下面這個(gè)例子中，我們默認(rèn)指定z-index值為1，但是，只有在z-index之前未指定的時(shí)候才這樣：

position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute

屬性會(huì)“向上冒泡”查找堆棧直到被發(fā)現(xiàn)，或者返回null（如果屬性搞不定）。下面這個(gè)例子，@color被弄成了blue.

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