上一节:
下一节:

  Stylus 变量

  • 变量

    我们可以将表达式赋值给变量，然后在整个样式表中使用变量： 
    font-size = 14px
body
  font font-size Arial, sans-serif
    编译为： 
    body {
  font: 14px Arial, sans-serif;
}
    变量甚至可以包含一个表达式列表： 
    body {
  font: 14px Arial, sans-serif;
}

    font-size = 14px
font-stack = "Lucida Grande", Arial, sans-serif
body
  font font-size font-stack
    编译为： 
    body {
  font: 14px "Lucida Grande", Arial, sans-serif;
}
    标识符（变量名，函数等）还可以包含 $ 字符。例如： 
    $font-size = 14px
body {
  font: $font-size sans-serif;
}

  • 属性查找

    Stylus 的另外一个很酷的独特功能是不需要分配值给变量就可以定义引用属性。下面是个很好的例子，元素水平垂直居中对齐（典型的方法是使用百分比和 margin 负值，如下） 
    #logo
  position: absolute
  top: 50%
  left: 50%
  width: w = 150px
  height: h = 80px
  margin-left: -(w / 2)
  margin-top: -(h / 2)
    无需定义变量 w 和 h，我们可以仅仅通过前置 @ 字符在属性名前来访问该属性名对应的值： 
     #logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
    另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中，我们默认指定z-index值为1，但是，只有在z-index之前未指定的时候才这样： 
    position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute
    属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）。下面这个例子，@color被弄成了blue. 
     body
color: red
ul
  li
    color: blue
    a
      background-color: @color
上一节:
下一节: