###混合书写(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 }

另外一个很赞的应用是特定的私有前缀支持——例如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

common-list() inline-list() li &:after content: ',' &:last-child:after content: ''

ul li:after { content: ',' } ul li:last-child:after { content: '' } ul li { display: inline-block; }