08.less中的条件判断

发表于 | 分类于

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

​ less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码
​ when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.size(@width,@height) when (@width = 100px){
  width: @width;
  height: @height;
}

// (),()相当于JS中的||
.size(@width,@height) when (@width = 100px),(@height = 100px){
  width: @width;
  height: @height;
}

// ()and()相当于JS中的&&
.size(@width,@height) when (@width = 100px)and(@height = 100px){
  width: @width;
  height: @height;
}
.size(@width,@height) when (ispixel(@width)){
  width: @width;
  height: @height;
}
div{
  .size(100px,100px);
  background: red;
}
  • 是”=”而不是”==”
  • (),()相当于JS中的||
  • ()and()相当于JS中的&&