有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:
@mixin (@s, @color) { ... }
.class {
.mixin(@switch, #888);
}
如果想让.mixin根据不同的@switch值而表现各异,如下这般配置:
.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) { // 接受任意值
display: block;
}
运行:
@switch: light;
.class {
.mixin(@switch, #888);
}
==>
.class {
color: #a2a2a2;
display: block;
}
我们也可以匹配多个参数:
.mixin (@a) {
color: @a;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}