jquery – 使用LESS / CSS将每个列表项颜色按X％更改

2023年7月23日 322次阅读

我有一个列表可能有未知数量的列表项.

我想减去每个列表项目,比如5％从基色开始.理想情况下,这可以使用LESS来完成,但是如果不为每个n-child声明规则,我的思想就不会完全解决这个问题.

一如既往,任何和所有的想法都赞赏

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

此外,不是100％反对使用jQuery,只是不喜欢.

最佳答案 感谢@veksen提供的链接,我能够让这个工作.可以在Codepen上找到一个演示 – http://codepen.io/harbingerlabs/pen/obXaMv

以下是完成的代码片段供参考：

/* 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)
}
点赞