Less的模式匹配

时间:2024-01-19 20:36:08

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);

编译后的CSS代码为:

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