模式匹配和导引表达式

有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:

@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);
}

你可能感兴趣的:(模式匹配和导引表达式)