当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。
为了尽可能地保留 CSS 的可声明性,LESS 通过导引混入而非 if/else 语句来实现条件判断。
语法格式:
.混入名称(参数) when(条件判断表达式) {
//...
}例如:
.mixin (@a) when (lightness(@a) >=50%) {
background-color: black;
}更多引导语法:
(1)引导中可用的比较运算,还支持: >(大于)、>=(大于等于)、 =(等于)、=<(小于等于)和 <(小于)。
(2)关键字 true 只表示布尔真值,下面两个混入是相同的:
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }(3)除去关键字 true 以外的值都被视示布尔假(false),例如:
.class {
// 与上述任何定义都不匹配。
.truth(40);
}(4)引导序列使用逗号(“,”)分割,当且仅当所有条件都符合时,才会被视为匹配成功。例如:
.mixin (@a) when (@a > -10), (@a < 10) {
// ...
}(5)导引可以无参数,也可以对参数进行比较运算,例如:
(6)如果想基于值的类型进行匹配,我们就可以使用is*函式:
.mixin (@a, @b: 0) when (isnumber(@b)) {
// ...
}
.mixin (@a, @b: black) when (iscolor(@b)) {
// ...
}就是常见的检测函式:
iscolor 判断value是否为颜色;如果是,则返回true。
isnumber 判断value是否为数字;如果是,则返回true。
isstring 判断value是否为字符串;如果是,则返回true。
iskeyword 判断value是否为keyword;如果是,则返回true。
isurl 判断value是否为url;如果是,则返回true。
你想判断一个值是纯数字,还是某个单位量,可以使用下列函式:
ispixel 判断value是否为像素;如果是,则返回true。
ispercentage 判断value是否为百分比;如果是,则返回true。
isem 判断value是否为em;如果是,则返回true。
引序列中可以使用 and 关键字实现与条件:
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
not 关键字实现或条件:
.mixin (@b) when not (@b > 0) { ... }
下面通过一个简单的例子来演示 Less 引导混入的用法:
// lightness 用来提取HSL颜色空间中颜色对象的亮度通道
// 当亮度大于等于 50%,则使用该混入
.mixin (@a) when (lightness(@a) >=50%) {
background-color: black;
}
// 当亮度小于等于 50%,则使用该混入
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
// 只要提供了 @a 参数,就会执行
.mixin (@a) {
color: @a;
}
// 使用引导
.class1 {
.mixin(#ddd)
}
.class2 {
.mixin(#555)
}注意,when 关键字用以定义一个导引序列 (此例只有一个导引)。
编译 less,输出的 CSS 如下:
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}