Less的条件表达式

时间：2021-10-11 16:15:14

Less的条件表达式

当需要根据表达式，而不是参数的值或数量进行匹配时，条件表达式（Guards）就显得非常有用。如果你熟悉函数式编程的话，对条件表达式也不会陌生。

为了尽可能地接近CSS的语言结构，Less使用关键字 when 而不是 if/else来实现条件判断，因为 when 已经在CSS的 @media query 特性中被定义。

表达式中可以使用比较运算符、逻辑运算符、或检查函数来进行条件判断。

1、比较运算符

Less包含五个比较运算符：<、>、<=、>=、=，可以使用比较运算符（=）来比较数字，字符串、标识符等，而其余的运算符只能与数字一起使用。如，以下Less代码：

  1. .mixin (@a) when (@a = 20px){
  2.     color:red;
  3. }
  4. .mixin (@a) when (@a < 20px){
  5.     color:blue;
  6. }
  7. .mixin (@a) {
  8.     font-size: @a;
  9. }
  10. h2 {
  11.     .mixin(20px)
  12. }

编译后的CSS代码为：

  1. h2 {
  2.   color: red;
  3.   font-size: 20px;
  4. }

此外，还可以使用关键字true，它表示布尔真，以下两个mixin是相同的：

  1. .truth (@a) when (@a) { ... }
  2. .truth (@a) when (@a = true) { ... }

在Less中，只有 true 表示布尔真，关键字true以外的任何值，都被视为布尔假。如：

  1. .class {
  2.   .truth(40);  // 不会匹配以上任何定义
  3. }

Less中，Guards可以是多个表达式，多个表达式之间，使用逗号‘,’分隔。如果其中任意一个表达式的结果为 true，则匹配成功，这就相当于“或”的关系。如：

  1. .mixin (@a) when (@a < -10), (@a > 10) {
  2.     width: 100px;
  3. }

上述Guards就表示： [-10,10] 之间的值将匹配失败，其余均匹配成功。比如以下调用，.class1 和 .class3 会匹配成功，.class2 将匹配失败：

  1. .class1 {
  2.    .mixin(-20);
  3. }
  4. .class2 {
  5.    .mixin(0);
  6. }
  7. .class3 {
  8.    .mixin(20);
  9. }

编译后的CSS代码为：

  1. .class1 {
  2.   width: 100px;
  3. }
  4. .class3 {
  5.   width: 100px;
  6. }

2、逻辑运算符

Less中，Guards也可以使用 and 和 not 来进行逻辑运算。如，以下Less代码：

  1. .mixin (@a) when (@a > 50%) and (@a > 5px){
  2.     font-size: 14px;
  3. }
  4. .mixin (@a) when not (@a < 50%) and not (@a < 5px){
  5.     font-size: 20px;
  6. }
  7. .mixin (@a) {
  8.     color: @a;
  9. }
  10. .class1 {
  11.     .mixin(#FF0000)
  12.  }
  13. .class2 {
  14.     .mixin(#555)
  15. }

编译后的CSS代码为：

  1. .class1 {
  2.   color: #ff0000;
  3. }
  4. .class2 {
  5.   color: #555555;
  6. }

3、检查函数

如果想基于值的类型、或特定的单位进行匹配，就可以使用 is* 函数。如：

  1. .mixin (@a, @b: 0) when (isnumber(@a)) { ... }
  2. .mixin (@a, @b: black) when (iscolor(@b) and (@a > 0)) { ... }

以下是常见的类型检查函数：

  • Iscolor：是否为颜色值。
  • Isnumber：是否为数值。
  • Isstring：是否为字符串。
  • Iskeyword：是否为关键字。
  • Isurl：是否为URL字符串。
  • 以下是常见的单位检查函数：
  • Ispixel：是否为像素单位。
  • ispercentage：是否为百分比。
  • isem：是否为em单位。
  • isunit：是否为单位。

相关文章