LESS CSS 守卫表达式匹配字符串答案

【问题标题】：LESS CSS guard expression matching stringLESS CSS 守卫表达式匹配字符串
【发布时间】：2013-12-10 16:19:16
【问题描述】：

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

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


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

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

【问题讨论】：

标签： css string less guard

【解决方案1】：

注意您传入的值

你所拥有的对 LESS 来说是正确的。但是你在调用它时传入的值可能不是。

这会起作用：

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

【讨论】：

我正在向@COLOR_SETTING 发送其他值，这就是警卫失败的原因。谢谢