有些情况下,我们想根据传入的参数来改变混入的默认呈现,比如下面这个例子:
.mixin (@s, @color) { //... } .class { .mixin(@switch, #888); }
如果想让 .mixin 根据不同的 @switch 值而表现各异,可以像下面这样做:
// 仅仅匹配首参为 dark .mixin (dark, @color) { color: darken(@color, 10%); } // 仅仅匹配首参为 light .mixin (light, @color) { color: lighten(@color, 10%); } // 变量匹配任意值的参数,下面默认匹配 .mixin (@_, @color) { display: block; }
现在,使用上面定义的混入:
@switch: light; .class { .mixin(@switch, #888); }
编译 less,输出的 CSS 如下:
.class { color: #a2a2a2; display: block; }
如上,.mixin 就会得到传入颜色的浅色。如果 @switch 设为 dark,就会得到深色。
具体实现如下:
(1)第一个混合定义并未被匹配,因为它只接受 dark 做为首参。
(2)第二个混合定义被成功匹配,因为它只接受 light。
(3)第三个混合定义被成功匹配,因为它接受任意值。
只有被匹配的混合才会被使用。变量可以匹配任意的传入值,而变量以外的固定值就仅仅匹配与其相等的传入值。我们也可以匹配多个参数:
.mixin (@a) { color: @a; } .mixin (@a, @b) { color: fade(@a, @b); }
现在我们使用一个参数调用 .mixin ,我们将得到第一个混合定义的输出。但是,如果我们使用两个参数进行调用,我们将得到第二个混合定义,即 .mixin (@a, @b):
// 调用混入 .class1 { .mixin(#888); } .class2 { .mixin(#888, 10%); }
编译 less,输出的 CSS 如下:
.class1 { color: #888; } .class2 { color: rgba(136, 136, 136, 0.1); }