在动态上减轻每个列表项子项的背景

Question

我有一个堆叠的菜单下拉菜单,我希望每个菜单项逐渐变亮.我已经使用sass lighten()规则手动完成了,但我想知道是否有一种方法可以为每个新的列表项增量减少5%的dinamically.我想有些jquery应该结合起来实现这个目标.

小提琴:http://jsfiddle.net/k2fjzro4/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list-item-1">1</li>
  <li class="list-item-2">2</li>
  <li class="list-item-3">3</li>
  <li class="list-item-4">4</li>
  <li class="list-item-5">5</li>
</ul>

Answer 1

你可以使用SASS @for.

ul li {
  padding: 10px;
  background-color: #333;
}

@for $i from 1 through 10 {
  li.list-item-#{$i} {
     background-color: lighten(#333, $i*5%);
  }  
}

如果你想要它为大量的项目动态发生,那么JS可能是不可避免的.