Change the color of each list item by X%. Using LESS / CSS

Question

I have a list that may contain an unknown number of list items.

I would like to bleach every element of the list, say 5%, starting with the base color. Ideally, this can be done using LESS, but my mind will not completely go around how to do this without announcing the rules for everyone nth-child.

As always, all and all thoughts were evaluated.

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

Also, not 100% against using jQuery, just not needed.

Answer 1

, @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)
}