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()
```

Stylus 混入(mixins)

定义和使用

父级引用