Stylus 混入(mixins)



  • 定义和使用

    混入和函数定义方法一致,但是应用却大相径庭。
    例如,下面有定义的 border-radius(n) 方法,其却作为一个 mixin(如,作为状态调用,而非表达式)调用。
    当 border-radius() 选择器中调用时候,属性会被扩展并复制在选择器中。
    border-radius(n)
      -webkit-border-radius n
      -moz-border-radius n
      border-radius n
    
    form input[type=button]
      border-radius(5px)
    
    
    编译成:
    form input[type=button] {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
    
    
    使用混入书写,你可以完全忽略括号,提供梦幻般私有属性的支持。
    border-radius(n)
      -webkit-border-radius n
      -moz-border-radius n
      border-radius n
    
    form input[type=button]
      border-radius 5px
    
    
    注意到我们混合书写中的 border-radius 当作了属性,而不是一个递归函数调用。
    更进一步,我们可以利用arguments这个局部变量,传递可以包含多值的表达式。
    border-radius()
      -webkit-border-radius arguments
      -moz-border-radius arguments
      border-radius arguments
    
    
    现在,我们可以像这样子传值:border-radius 1px 2px / 3px 4px!
    另外一个很赞的应用是特定的私有前缀支持——例如IE浏览器的透明度:
    support-for-ie ?= true
    opacity(n)
      opacity n
      if support-for-ie
        filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
    
    #logo
      &:hover
        opacity 0.5
    
    
    渲染为:
    #logo:hover {
      opacity: 0.5;
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    }
    
    
  • 父级引用

    混合书写可以利用父级引用字符&, 继承父业而不是自己筑巢。
    例如,我们要用 stripe(even, odd) 创建一个条纹表格。even 和 odd 均提供了默认颜色值,每行也指定了 background-color 属性。我们可以在tr嵌套中使用&来引用 tr,以提供 even 颜色。
    stripe(even = #fff, odd = #eee)
      tr
        background-color odd
        &.even
        &:nth-child(even)
            background-color even
    
    
    然后,利用混合书写,如下:
    table
      stripe()
      td
        padding 4px 10px
    
    table#users
      stripe(#303030, #494848)
      td
        color white
    
    
    另外,stripe()的定义无需父引用:
    stripe(even = #fff, odd = #eee)
      tr
        background-color odd
      tr.even
      tr:nth-child(even)
        background-color even
    
    
    如果你愿意,你可以把 stripe() 当作属性调用。
    stripe #fff #000
    
    
    自然,混合书写可以利用其它混合书写,建立在它们自己的属性和选择器上。
    例如,下面我们创建内联 comma-list()(通过inline-list())以及逗号分隔的无序列表。
    inline-list()
      li
        display inline
    
    comma-list()
      inline-list()
      li
        &:after
          content ', '
        &:last-child:after
          content ''
    
    ul
      comma-list()
    
    
    渲染:
    ul li:after {
      content: ", ";
    }
    ul li:last-child:after {
      content: "";
    }
    ul li {
      display: inline;
    }
      comma-list()