使用 SASS 函数自动设置嵌套元素的背景颜色

我正在制作一个多级导航系统，并希望每个级别的背景颜色变暗 20%（因此第 1 级 = #fff，第 2 级 = #ccc，第 3 级 = #999 等等）。一定有一种很棒的方法可以使用 SASS 函数动态地自动化这个过程，但我不太明白如何设置该语句。有人能指出我正确的方向吗？

FIDDLE http://sassmeister.com/gist/1ae366f4646f45381a4f

<ul>
  <li>Level 1: Item 1 (#fff)
    <ul>
      <li>Level 2: Item 1 (#ccc)</li>
      <li>Level 2: Item 2 (#ccc)
        <ul>
          <li>Level 3: Item 1 (#999)</li>
          <li>Level 3: Item 2 (#999)</li>
          <li>Level 3: Item 3 (#999)</li>
        </ul>
      </li>
      <li>Level 2: Item 3 (#ccc)</li>
    </ul>
  </li>
  <li>Level 1: Item 2 (#fff)</li>
  <li>Level 1: Item 3 (#fff)</li>
</ul>

li
  background: darken(white, 20%)

递归 mixin 应该可以做到这一点：

@mixin levels($initial, $percentage, $depth)
  $next: darken($initial, $percentage)
  @if ($depth > 0)
    li
      background: $initial
      @include levels($next, $percentage, $depth - 1)

@include levels(white, 20%, 5)

本质上，levelsmixin 创建一个li规则，但随后嵌套另一个副本levels在其中。 （以及$depth参数确保它不会永远持续下去。）

你可以乱搞li选择器以进行更多控制，例如，将其更改为.class选择器，或者使用类似的东西& > ul > li.