2 u014292161 u014292161 于 2017.09.12 16:34 提问

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

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

 .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)
}

1个回答

q213546879
q213546879   2017.09.12 20:36

这是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;
}
q213546879
q213546879 回复summer_雪: 这就没办法回答你了,因为HSl色彩空间我也不是很了解,这个和为什么红色的rgb值是255,0,0一样
2 个月之前 回复
u014292161
u014292161 感谢你的回答,但是为什么lightness(#FF0000)=50%?
2 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片