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. }

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。