css - LESS CSS 守卫表达式匹配字符串

Question

如果值是字符串“red”，我想将背景颜色应用于某些元素。我在网上搜索，发现我不能在字符串上使用 <、>、<=、>=，而 = 的行为不同。

.myfunction(@PLACEHOLDER_COLOR) when (@PLACEHOLDER_COLOR = 'red') {
  background-color:red;
}


.bullet:hover,
.bullet.selected
{.myfunction(@COLOR_SETTING)}

有谁知道如何检查该值是否等于字符串？ 谢谢。

Answer 1

注意传递的值

对于 LESS，您所拥有的是正确的。但是您在调用它时作为值传递的内容可能不是。

这会起作用:

@COLOR_SETTING: 'red'; // or "red"

这不会(因为它不是字符串“red”而是 red 的 LESS 颜色值):

@COLOR_SETTING: red;

其他选项

如果您要传递颜色值而不是字符串，请将您的混合宏更改为:

.myfunction(@PLACEHOLDER_COLOR) when (@PLACEHOLDER_COLOR = red) {
  background-color:red;
}

它也接受诸如 #f00 之类的输入。

如果你想接受字符串或颜色输入，这会起作用(但如果值不能变成颜色，它会抛出一个 LESS 错误):

.myfunction(@PLACEHOLDER_COLOR) when (color("@{PLACEHOLDER_COLOR}") = red) {
  background-color:red;
}