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

Question

我正在制作一个多级导航系统,并希望每个级别的背景颜色变暗20%(所以第一级= #fff,第二级= #ccc,第三名=#999等等).GOT是使用SASS函数动态自动化这个过程的一种很棒的方法,但是我无法完全理解语句的设置方式.谁能指出我正确的方向？

小提琴

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

Answer 1

递归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.