CSS＆LESS时＆gt;和＆＆lt;某物

Question

我试图在值小于和大于时设置属性，以设置要应用的属性的窗口。

示例：

.mixin (@colorVal) when (lightness(@colorVal) > 75%) {color:red;}
.mixin (@colorVal) when (lightness(@colorVal) > 25%) {color:green;}
.mixin (@colorVal) when (lightness(@colorVal) <= 75%) {color:green;}
.mixin (@colorVal) when (lightness(@colorVal) <= 25%) {color:blue;}

我无法弄清楚如何组合警卫。在上面的示例中，亮度为20％的颜色将同时应用第3和第4警卫。所以它会编译绿色和蓝色的颜色。由于订单技术上正确呈现，但仍然有点混乱......

任何替代解决方案？谢谢！

Answer 1

From the LESSCSS docs

  

您可以将逻辑运算符与警卫一起使用。语法基于CSS媒体查询。

     

使用and关键字组合警卫：

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

因此，对于您的案例使用：

.mixin (@colorVal) when (lightness(@colorVal) > 25%) and (lightness(@colorVal) < = 75%) {
    color:green;
}