CSS/LESS 当 > 某事和 < 某事

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% 的颜色将同时应用第三个和第四个防护。所以它会编译出绿色和蓝色的颜色。由于顺序，技术上可以正确渲染，但仍然有点困惑......

还有其他解决方案吗？谢谢!

Answer 1

From the LESSCSS docs

You can use logical operators with guards. The syntax is based on CSS media queries.

Use the and keyword to combine guards:

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

所以对于您的情况使用:

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