前面我已经有一篇文章是写 LESS 的基础语法的。
那么这一次我们来看一下 LESS 的高级特性。
虽然个人觉得模式匹配的实用度其实也是一般般,但在关键时候,有它们在的话,还是能够让我们开发得更得心应手的。
其实传参设置默认值,就是一个最简单的模式匹配。
你调用 Mixins 函数,传入参数,和不传入参数,可能会出现不同的编译结果。
那么除此之外,模式匹配还有那些情况呢,让我们来看一下。
按照先前的惯例,LESS CODE 和 CSS CODE 分别是编译前跟编译后的代码。
1.用不同参数个数来匹配不同的 Mixins
/* LESS CODE */ .test(@size){ width: @size; } .test(@size, @multiple){ width: @size * @multiple; } .el-a{ .test(10px); } .el-b{ .test(10px, 2); }
/* CSS CODE */ .el-a { width: 10px; } .el-b { width: 20px; }
2.用常量参数来匹配不同的 Mixins
/* LESS CODE */ .test(large, @size: 10px){ width: @size * 2; } .test(simple, @size: 10px){ width: @size; } .test(@_, @size: 10px){ display: block; } .el-a{ .test(large); } .el-b{ .test(simple); }
/* CSS CODE */ .el-a { width: 20px; display: block; } .el-b { width: 10px; display: block; }
以下是整个过程如何发生的:
第一个 .test 只有在满足 large 条件才会被匹配;
第二个 .test 只有在满足 simple 条件才会被匹配;
第三个 .test 在任何条件下,甚至是 large 和 simple 以外的条件下都会被匹配,只要满足传参规则就可以了(.test 要求传入1~2个参数);
只要是满足匹配要求的 Mixins,都会被使用。
变量可以匹配任何值,而常量只有在传入的值与之完全相等时才可以匹配成功。
3.
时间: 2024-10-11 16:16:28