LESS 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

导引表达式

当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。

  为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断,因为前者已在@media query特性中被定义。

以此例做为开始:

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码:

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

就会得到:

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}