css - CSS/LESS 当 > something AND < something

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

来自 LESSCSS 文档

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

使用 and 关键字来组合守卫：

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

因此，对于您的情况，请使用：

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