我有循环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);
但这会引发错误.
有没有办法让它工作,并在悬停使颜色更暗？
解决方法
推荐方案：
实际上,我使上述内容比要求复杂得多.一个简单的选择是使用连接形成变量名,然后在darken()函数本身内进行评估,而不是使用〜“”(输出String而不是Color).
&: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}}()`"),@prefix);
}
.gen-cats-filter(2,cat); //I assumed this line was an error in your code and hence modified it.
> @clr：“@ {@ {prefix} – @ {index}}”; – 只是为了降低复杂性
下一行.对于@ cat-1,这评估为“#00c409”.
> color(〜“`function(){return @ {clr}}()`”) – 将字符串转换为
可以在变暗功能中使用的颜色值.
> darken() – 使颜色值变暗.
随着Less编译器的最新更新,我们也可以避免JS函数位并直接写入如下：
background-color: darken(color(@clr),20%);
