Less的模式匹配

Posted 2020-10-15 Web先生的博客

Less的模式匹配

Less提供了一种机制，允许根据参数的值来改变 mixin的行为。比如，以下代码就可以让 .mixin 根据不同的 @switch 值而表现各异：

1. .mixin (dark, @color) {
2.   color: darken(@color, 10%);
3. }
4. .mixin (light, @color) {
5.   color: lighten(@color, 10%);
6. }

此时，在调用 .mixin 时：如果 @switch 设为 light，就会得到浅色；如果 @switch 设为 dark，就会得到深色。如，以下调用：

1. @switch: light;
2. .class1 { 
3.     .mixin(@switch, #888);
4. }
5. @switch2 : dark;
6. .class2 {
7.     .mixin(@switch, #666);
8. } 

编译后的CSS代码为：

1. .class1 {
2.   color: #a2a2a2;
3. }
4. .class2 {
5.   color: #808080;
6. }