当前位置: 首页 > 文档资料 > Less 简明教程 >

2.10 模式匹配

优质
小牛编辑
128浏览
2023-12-01

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

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}

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

@switch: light;
.class1 { 
    .mixin(@switch, #888);
}
@switch2 : dark;
.class2 {
    .mixin(@switch, #666);
} 

编译后的CSS代码为:

.class1 {
  color: #a2a2a2;
}
.class2 {
  color: #808080;
}