当前位置: 首页 > 文档资料 > Less 简明教程 >

2.11 条件表达式

优质
小牛编辑
128浏览
2023-12-01

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

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

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

1、比较运算符

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

.mixin (@a) when (@a = 20px){
    color:red;
}
.mixin (@a) when (@a < 20px){
    color:blue;
}
.mixin (@a) {
    font-size: @a;
}
h2 {
    .mixin(20px)
}

编译后的CSS代码为:

h2 {
  color: red;
  font-size: 20px;
}

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

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

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

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

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

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

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

.class1 {
   .mixin(-20);
}
.class2 {
   .mixin(0);
}
.class3 {
   .mixin(20);
}

编译后的CSS代码为:

.class1 {
  width: 100px;
}
.class3 {
  width: 100px;
}

2、逻辑运算符

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

.mixin (@a) when (@a > 50%) and (@a > 5px){
    font-size: 14px;
}
.mixin (@a) when not (@a < 50%) and not (@a < 5px){
    font-size: 20px;
}
.mixin (@a) {
    color: @a;
}
.class1 {
    .mixin(#FF0000)
 }
.class2 {
    .mixin(#555)
}

编译后的CSS代码为:

.class1 {
  color: #ff0000;
}
.class2 {
  color: #555555;
}

3、检查函数

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

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

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

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