当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。
为了尽可能地保留 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; }