变量

我们可以将表达式赋值给变量，然后在整个样式表中使用变量：

 font-size = 14px

 body
   font font-size 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 负值，如下）： Another cool feature unique to Stylus is the ability to reference properties defined without assigning their values to variables. A great example of this is the logic required for vertically and horizontally center an element (typically done using percentages and negative margins, as follows):

 #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之前未指定的时候才这样： Another use-case is conditionally defining properties within mixins based on the existence of others . In the following example, we apply a default z-index of 1—but only if z-index was not previously specified:

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

  #logo
    z-index: 20
    position: absolute

  #logo2
    position: absolute

属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）。下面这个例子，@color被弄成了blue. Property lookup will “bubble up” the stack until found, or return null if the property cannot be resolved. In the following example, @color will resolve to blue:

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