stylus之混合书写(Mixins)

混合书写(Mixins)

Mixins：Mixins是预处器中的函数。平时你在写样式时某段CSS样式要经常重复性的用到多个元素中，这样你就需要重复的写多次。在CSS预处器中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性。Mixins是一个公认的选择器，还可以在Mixins中定义变量或者是默认参数

可以不使用任何符号，就是直接定义Mixins名，然后在定义参数和默认值之间用等号（=）来连接

转译后：

混入：

混入和函数定义方法一致，但是应用却大相径庭

例如下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用

当border-radius()选择器中调用时候，属性会被扩展并复制在选择器中

编译成

使用混入书写，你可以完全忽略括号，提供梦幻般私有属性的支持

注意这里我们在混合书写中的border-radius当作了属性用来给标签添加CSS样式，而并不是作为一个递归函数在调用

更进一步，我们可以利用arguments这个局部变量，传递可以包含多值的表达式

现在，我们可以像这样子传值：border-radius 1px 2px / 3px 4px!

另外一个很赞的应用是特定的私有前缀支持——例如IE浏览器的透明度

渲染为

父级引用:

混合书写可以利用父级引用字符&, 继承父业而不是自己筑巢

例如，我们要用stripe(even, odd)创建一个条纹表格。even和odd均提供了默认颜色值，每行也指定了background-color属性。我们可以在tr嵌套中使用&来引用tr，以提供even颜色

然后，利用混合书写，如下

另外，stripe()的定义无需父引用

混合书写中的混合书写：

自然，混合书写也可以再利用其它的混合书写进行组合，建立在它们自己的属性和选择器上

例如，下面我们创建内联comma-list()（通过inline-list()）以及逗号分隔的无序列表

渲染