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)
    
    
    无需定义变量 wh,我们可以仅仅通过前置 @ 字符在属性名前来访问该属性名对应的值:
     #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