Less 引导

当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。如果你对函数式编程非常熟悉,那么你很可能已经使用过导引。

为了尽可能地保留 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;
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号