如何在LESS中使用变量变量，颜色存储在循环和混合中的命名变量中

Question

我有一个LESS循环，我在其中确定要在CSS规则中使用的颜色值。我通过一些相当复杂的变量计算来获得它们，这迫使我使用字符串(如果我删除"我得到一个解析错误")。所以我得到的是一个包含字符串形式的颜色值的变量

@color: "@{col_@{animal}}"
// this is in a loop, and @animal contains the name of a var ('dog', 'cat', ...)
// @col_dog, @col_cat contain a color
// @col_dog: #F9E2A0 
// @col_cat: #094DD0

所以如果我尝试将@color变量赋值给规则

.border { border-color: @color }

在CSS中我得到

.border {border-color: "#F9E2A0"}

显然被忽略了。有没有一种方法可以摆脱"字符串"形式，或者有一种方法可以在不使用字符串的情况下进行变量评估?

谢谢!

Answer 1

只需使用@@

我自己已经为此挣扎了一段时间了。解决办法很简单。只是使用@@而不是@来表示颜色。然后颜色将被正确解析，并成为一个颜色对象。为此，我首先将变量名"color_cat"存储在一个名为@color的变量中。我使用变量变量技术@@来解析变量。

在你的例子中，下面的代码可以工作:

@color_dog: red;
@color_cat: yellow;
.animal-border(@animal){
    @color: "color_@{animal}";
    .@{animal}.border{
        border-color: @@color;
    }
}
.animal-border(dog);
.animal-border(cat);

结果:

.dog.border {
  border-color: #ff0000;
}
.cat.border {
  border-color: #ffff00;
}

---

与此问题相关的一些错误。当使用dark或light方法时，会出现这种情况:

求函数darken: object#没有方法'toHSL'

或者当尝试为color方法提供字符串值"#FF0000"时发生这种情况:

计算函数color错误:参数必须是颜色关键字或3/6位十六进制，例如#FFF

---

一些与SO相关的帖子:

• 在LESS操作中用变量定义变量名
• less undefined method error
• Less
• 使用LESS CSS定义变量

Answer 2

根据文档http://lesscss.org/functions/#misc-functions-color

解析颜色，因此表示颜色的字符串成为颜色。

这应该是你想要的:

.border { border-color: color(@color) }