CSS/LESS当>某事AND <某些

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媒体查询。

使用和关键字后卫组合：

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

因此，对于你的情况下使用：

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