CSS/LESS 当 > 某事 AND < 某事

Question

我正在尝试在值小于和大于时设置属性，以便为要应用的属性设置 window。

示例：

.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

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;
}

CSS/LESS 当 > 某事 AND < 某事

CSS/LESS when > something AND < something

css

conditional-statements

less-mixins