Jquery 使用LESS/CSS将每个列表项的颜色更改X%
我有一个列表，其中可能包含未知数量的列表项 我想去饱和每一个列表项，说5%，从一个基本颜色开始。理想情况下，这可以用更少的资源来完成，但是如果不为每个Jquery 使用LESS/CSS将每个列表项的颜色更改X%,jquery,html,css,less,Jquery,Html,Css,Less,我有一个列表，其中可能包含未知数量的列表项 我想去饱和每一个列表项，说5%，从一个基本颜色开始。理想情况下，这可以用更少的资源来完成，但是如果不为每个n个子声明规则的话，我的脑子里就不太清楚该怎么做了 一如既往，所有的想法都值得赞赏 <ul> <li>item1</li> <!-- base color --> <li>item2</li> <!-- desaturate 5% --> <li&
n个子<ul>
<li>item1</li> <!-- base color -->
<li>item2</li> <!-- desaturate 5% -->
<li>item3</li> <!-- desaturate 10% -->
<li>item4</li> <!-- desaturate 15% -->
<li>item5</li> <!-- desaturate 20% -->
</ul>
- 第1项
- 第2项
- 第3项
- 第4项
- 第5项
另外，并非100%反对使用jQuery，我只是不想这样做。多亏@veksen提供的链接，我才得以实现这一点。可以在Codepen上找到演示- 以下是完成的代码片段，供参考：
/* Define two variables as the loop limits */
@from : 0;
@to : 100;
/* Create a Parametric mixin and add a guard operation */
.loop(@index) when(@index =< @to) {
/* As the mixin is called CSS is outputted */
li:nth-child(@{index}) {
background: spin(@alizarin,3.5 * @index);
}
/* Interation call and operation */
.loop(@index + 1);
}
/* the mixin is called, css outputted and iterations called */
.loop(@from);
ul.colors {
li {
color: white;
padding: 10px;
}
.loop(0)
}
/*定义两个变量作为循环限制*/
@从：0；
@至:100 ;；
/*创建参数化混合并添加保护操作*/
.loop（@index）何时（@index=<@to）{
/*当mixin被称为CSS时，输出CSS*/
li:n子（@{index}）{
背景：自旋（@茜素，3.5*@指数）；
}
/*交互呼叫和操作*/
.loop（@index+1）；
}
/*调用mixin，输出css，调用迭代*/
.loop（@from）；
颜色{
李{
颜色：白色；
填充：10px；
}
.loop（0）
}