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