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);
}
说说我的看法
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号