混合书写(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())以及逗号分隔的无序列表
渲染