Question

我希望将背景颜色应用于某个元素，以防值为字符串'red'。我在网上搜索，发现我不能在字符串上使用＆lt ;,＆gt;，＆lt; =，＆gt; =并且行为方式不同。

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


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

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

Answer 1

观察您的传入值

你拥有的是正确的。但是，你在调用它时传递的值可能不是。

这将有效：

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

这不会（因为它不是字符串“red”，而是red的LESS颜色值）：

@COLOR_SETTING: red;

其他选项

如果您要传递颜色值而不是字符串，请将您的mixin更改为：

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

哪个也接受#f00等输入。

如果你想接受字符串或颜色输入，这将有效（但如果不能将值变成颜色，它会抛出一个LESS错误）：

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

LESS CSS保护表达式匹配字符串

1 个答案:

观察您的传入值

其他选项