变量

我们可以声明变量,并在整个样式表中使用:

  1. font-size = 14px
  2. body
  3. font font-size Arial, sans-serif

编译CSS为:

  1. body {
  2. font: 14px Arial, sans-serif;
  3. }

变量甚至可以包含在表达式中:

  1. font-size = 14px
  2. font = font-size "Lucida Grande", Arial
  3. body
  4. font font sans-serif

编译CSS为:

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

标识符 (变量名、 函数等) 也可以是$开始。例如:

  1. $font-size = 14px
  2. body {
  3. font: $font-size sans-serif;
  4. }

属性查找

Stylus另一个很酷的、特有功能就是可以不用定义变量而引用属性。
另一个很酷的功能独有的手写笔是而不将它们的值分配给变量定义的引用属性的能力。下面是个很好的例子,让元素水平垂直居中对齐(典型的方法是使用百分比和margin负值):

  1. #logo
  2. position: absolute
  3. top: 50%
  4. left: 50%
  5. width: w = 150px
  6. height: h = 80px
  7. margin-left: -(w / 2)
  8. margin-top: -(h / 2)

我们可以不使用变量wh,而是简单地通过@字符获取属性对应的值:

  1. #logo
  2. position: absolute
  3. top: 50%
  4. left: 50%
  5. width: 150px
  6. height: 80px
  7. margin-left: -(@width / 2)
  8. margin-top: -(@height / 2)

另外一种使用情况就是在混合中根据其他属性来定义属性值。在下面这个例子中,我们定义在z-index未被指定情况下默认值为1。

  1. position()
  2. position: arguments
  3. z-index: 1 unless @z-index
  4. #logo
  5. z-index: 20
  6. position: absolute
  7. #logo2
  8. position: absolute

属性查找通过”冒泡”方式直到找到相应的值,或该属性不存在则返回null。在以下示例中, @color被解析为blue:

  1. body
  2. color: red
  3. ul
  4. li
  5. color: blue
  6. a
  7. background-color: @color