对估计的字符串颜色应用颜色函数 [英] apply color function on evaluated string color

问题描述

我有更少的循环，它是用颜色重复抛出编号变量。

I have loop in less which is iterating throw numbered variables with colors. It's working fine when I need just evaluate color but not when I want also change color with function.

@cat-1:#c40009;
....

.gen-cats-filter (@index,@prefix) when (@index > 0) {
  .@{prefix}@{index}{
   background-color: ~"@{cat-@{index}}";
   &:hover{
     background-color: darken(~"@{cat-@{index}}", 20%);
   }
  }
  .gen-cats-filter(@index - 1,@prefix);
}
.gen-cats(14,cat);

但这会引发错误。

推荐答案

推荐解决方案：

其实，我做的上面比要求复杂得多。一个简单的选项是使用连接形成变量名，然后在 darken（）函数本身中评估它，而不是使用〜 （输出一个字符串而不是颜色）。

Actually, I made the above a lot more complicated than required. A simple option would be to just form the variable name using concatenation and then evaluate it within the darken() function itself instead of using the ~"" (which outputs a String instead of a Color).

&:hover{
   @clr: "@{prefix}-@{index}";
   background-color: darken(@@clr,20%);
}

---

---

Original Answer:

假设我正确理解了您的查询，您可以通过以下方式实现：

Assuming I understood your query correctly, you can achieve it the below way:

@cat-1:#c40009;
@cat-2:#0009c4;

.gen-cats-filter (@index,@prefix) when (@index > 0) {
  .@{prefix}@{index}{
    background-color: ~"@{@{prefix}-@{index}}";
   &:hover{
      @clr: "@{@{prefix}-@{index}}";
      background-color: darken(color(~"`function(){return @{clr}}()`"),20%);
   }
  }
  .gen-cats-filter(@index - 1,@prefix);
}
.gen-cats-filter(2,cat); //I assumed this line was an error in your code and hence modified it.

1. @clr：@ {@ prefix} - @ {index}}; - 只是为了降低下一行的复杂度
   。这将为 @ cat-1 评估＃00c409。


2. color（〜`function（）{return @ {clr}}（）`） - 将字符串转换为
   a颜色值， darken 函数。


3. darken（） - 加深颜色值。 / li>
   

1. @clr: "@{@{prefix}-@{index}}"; - Just for reducing the complexity of the next line. This evaluates to "#00c409" for @cat-1.
2. color(~"`function(){return @{clr}}()`") - Converts the string into a color value that can be used within the darken function.
3. darken() - Darkens the color value.

CodePen Demo

通过对Less编译器的最新更新，我们可以避免JS函数位也直接写如下：

With recent updates to the Less compiler, we can avoid the JS function bit also and directly write it as follows:

background-color: darken(color(@clr),20%);

这篇关于对估计的字符串颜色应用颜色函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！