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

Question

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

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

这显然被忽略了。 有没有一种方法可以摆脱“字符串”形式，或者有一种方法可以在不使用字符串的情况下进行我需要的 vars 评估？

谢谢!

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

---

与此问题相关的一些错误。使用变暗或变亮方法时会发生这种情况:

error evaluating function darken: Object # has no method 'toHSL'

或者当尝试向颜色方法提供字符串值“#FF0000”时会发生这种情况:

error evaluating function color: argument must be a color keyword or 3/6 digit hex e.g. #FFF

---

关于 SO 的一些相关帖子:

• Define variable name with variable in LESS operation
• less undefined method error
• Lighten color from parent in Less
• Defining Variable Variables using LESS CSS