less的问题,不明白下面这个代码，麻烦哪位大神解释一下

Question

不明白下面这个代码，麻烦哪位大神解释一下

 .mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}
.mixin (@a) {
   color: @a;
}
.class1 {
   .mixin(#FF0000)
}
.class2 {
   .mixin(#555)
}

Answer 1

这是less里面的带参数混合中的模式匹配，
在这里mixin被当做一个参数，下面class1和class2去调用mixin的时候就会把mixin里面所有的样式继承到class1和class2当中，那么首先，class1和class2
里面就会有这样一个结果

 .class1{
     color:#ff0000
 }
 .class2{
     color:#555
 }

这里之所以class1和class2得到的颜色不一样是因为两个class在调用的时候传进去的参数不一样所导致的

首先这里没问题了，这时候再看最上面的两个函数，名字同样叫做mixin 但是要匹配这两个函数是有条件的，在这里只有满足了when里面的条件才会匹配成功对应的函数，如果说你在when里面写一个判断语句，然后当你调用mixin的时候满足了这个判断，这时候就会匹配当前这个mixin里面缩写的样式

比如在这里，when里面的条件是 lightness(@a) >= 50%
在这里 lightness(@a)是一个less的色彩函数，这个函数会把传进去的颜色化成 HSL 色彩空间，得到的值就是百分比。比如lightness(#FF0000)得到的值就是50%

然后lightness(#555得到的就是33.33%) 然后回过头来看class1里面调用mixin函数的时候，传入的颜色是ff0000 这时候lightness(#FF0000)得到的是正好是50%，那么满足第一个mixin函数中，when里面的条件，所以匹配了第一个mixin, 这时候class1里面就会得到第一个mxin里面的代码，也就是font-size:14px；再往后class2也是一次类推

最后class1和class2得到的完整的代码就是

 .class1 {
  font-size: 14px;
  color: #FF0000;
}
.class2 {
  font-size: 16px;
  color: #555;
}