Question

我有循环in less，它是用颜色迭代抛出的编号变量。当我需要评估颜色时它工作正常，但是当我想要用功能改变颜色时却没有。

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

但这会引发错误。

有没有办法让它工作，并在悬停时使颜色变暗？

Answer 1

推荐解决方案：

实际上，我使上述内容比要求复杂得多。一个简单的选择是使用连接形成变量名称，然后在darken()函数本身内进行评估，而不是使用~""（输出字符串而不是颜色）。

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

原始答案：

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

@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.

@clr: "@{@{prefix}-@{index}}"; - 只是为了降低复杂性下一行。这评估为"#00c409"的{{1}}。
@cat-1 - 将字符串转换为可以在color(~"`function(){return @{clr}}()`")函数中使用的颜色值。
darken - 使颜色值变暗。

CodePen Demo

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

darken()

对评估的字符串颜色应用颜色函数

1 个答案: