混合書寫(Mixins)

混入

混入和函數(shù)定義方法一致，但是應(yīng)用卻大相徑庭。

例如，下面有定義的border-radius(n)方法，其卻作為一個mixin（如，作為狀態(tài)調(diào)用，而非表達式）調(diào)用。

當border-radius()選擇器中調(diào)用時候，屬性會被擴展并復(fù)制在選擇器中。

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當作了屬性，而不是一個遞歸函數(shù)調(diào)用。

更進一步，我們可以利用arguments這個局部變量，傳遞可以包含多值的表達式。

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

現(xiàn)在，我們可以像這樣子傳值：border-radius 1px 2px / 3px 4px!

另外一個很贊的應(yīng)用是特定的私有前綴支持——例如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);
}

父級引用

混合書寫可以利用父級引用字符&, 繼承父業(yè)而不是自己筑巢。

例如，我們要用stripe(even, odd)創(chuàng)建一個條紋表格。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()當作屬性調(diào)用。

stripe #fff #000

混合書寫中的混合書寫

自然，混合書寫可以利用其它混合書寫，建立在它們自己的屬性和選擇器上。

例如，下面我們創(chuàng)建內(nèi)聯(lián)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;
}