Less 模式匹配

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

.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);
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号