Question

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

FIDDLE

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

基本上，levels mixin会创建li规则，但会在其中嵌套levels的另一个副本。（并且$depth参数确保它不会永远持续下去。）

您可以使用li选择器进行更多控制，例如，将其更改为.class选择器，或使用& > ul > li之类的内容。

Answer 2

如果你只是利用alpha透明度，你可以节省一些工作。

li li
  background: rgba(black, .2)

http://sassmeister.com/gist/d329c946068d3075ba72

P.S。它也有助于获得有效的标记。

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

2 个答案: