Html 如何为k儿童逐步设置颜色？

我有k个

tab_title

类的孩子，我想逐步将他们的背景从

color1

绘制到

color2

例如： 如果k=3，color1=red（#FF0000），color2=yellow（#FFFF00），则第一个元素的背景为红色（#FF0000），第二个元素的背景为橙色（#FF8000），第三个元素的背景为黄色（#FFFF00）；k=5，颜色1=白色，颜色2=黑色，然后第一个是白色，第二个是灰色25%，第三个是灰色50%，第四个是灰色75%，第五个是黑色

我希望它适用于任何

k

，而无需明确指定每个

n-child（）的音调。有没有什么方法可以完全通过css或sass来实现这一点？因为类可以被添加或删除，所以我更希望不涉及任何JS代码

我正在使用以下代码：

@mixin gradbg($n, $c1, $c2){
    @for $i from 1 through $n {
        &:nth-child(#{$i}) {
            background-color: mix($c1,$c2,((1 - (($i - 1) / ($n - 1)))*100%));
        }
    }
}

然后

li.tab_title{
    $from: #097380;
    $to: #4da759;
    @include gradbg(3,$from,$to);
}

唯一缺少的是自动计数
k
，这样我就可以使用
gradbg（k，$from，$to）
而不是
gradbg（3，$from，$to）

非常感谢

Guy
我已经为硬编码数组值做了这项工作，也许你可以调整逻辑并使用递归函数来获得它



李{
高度：100px；
宽度：100px；
}





变量k=[“#FF0000”、“#FFFF00”]；
var十六进制=[]；
var intermeidate_color=“”；
函数hexToRgb（hex）{
var result=/^#？（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{2}）$/i.exec（十六进制）；
返回结果{
r:parseInt（结果[1]，16），
g:parseInt（结果[2]，16），
b:parseInt（结果[3]，16）
}：null；
}
k、 地图（功能（项目、索引）{
六角推({
r:hexToRgb（项目）.r，
g:hexToRgb（项目）.g，
b:hexToRgb（项目）.b
})
});
控制台日志（十六进制）；
对于（变量i=0；ireturn“#”+（（1我已经对硬编码数组值进行了处理，可能您需要调整逻辑并使用递归函数来获取它



李{
高度：100px；
宽度：100px；
}





变量k=[“#FF0000”、“#FFFF00”]；
var十六进制=[]；
var intermeidate_color=“”；
函数hexToRgb（hex）{
var result=/^#？（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{2}）$/i.exec（十六进制）；
返回结果{
r:parseInt（结果[1]，16），
g:parseInt（结果[2]，16），
b:parseInt（结果[3]，16）
}：null；
}
k、 地图（功能（项目、索引）{
六角推({
r:hexToRgb（项目）.r，
g:hexToRgb（项目）.g，
b:hexToRgb（项目）.b
})
});
控制台日志（十六进制）；
对于（变量i=0；ireturn“#”+（（正如我指出的，我不想要JS解决方案（我自己设法实现了）.css拜托。你能把你得到的东西弄一弄吗？我可以帮你更多。@Spätzle我可以做到这一点，它再次使用javascript。在这里发布你的fiddle链接，我可以编辑它。正如我所说，我已经有了一个可用的javascript解决方案，我不需要另一个。我想知道是否有任何css解决方案。明白了。！！我刚刚遇到了。
mix
可能会有所帮助。正如我指出的，我不想要JS解决方案（我自己设法实现了）.css拜托。你能把你得到的东西弄一弄吗？我可以帮你更多。@Spätzle我可以做到这一点，它再次使用javascript。在这里发布你的fiddle链接，我可以编辑它。正如我所说，我已经有了一个可用的javascript解决方案，我不需要另一个。我想知道是否有任何css解决方案。明白了。！！我刚刚遇到了。
mix
可能会有所帮助。