loops - SASS 循环选择器

Question

我有这个重复的选择器，如下所示:

// Level 1
.wrap > ul > li {
  background: green;
}

// Level 2 
.wrap > ul > li > ul > li {
  background: orange;
}

// Level 3 
.wrap > ul > li > ul > li > ul > li {
  background: red;
}

// Level 4 
.wrap > ul > li > ul > li > ul > li > ul > li {
  background: light-red;
}

// Level 5 
.wrap > ul > li > ul > li > ul > li > ul > li > ul > li{
  background: salmon;
}

有没有办法可以创建一个 sass 函数，所以我可以像这样指定深度和颜色

 **for example** 
 @include depth(5) { background: salmon })

我会很感激你的帮助:)

Answer 1

您可以使用 for 循环生成选择器链，然后将其注入(inject)到带有 interpolation 的规则中:

@mixin depth($depth: 1) {
  $chain: '';
  @for $i from 0 to $depth {
    $chain: $chain + ' > ul > li';
  }

  & #{$chain} {
    @content;
  }
}

example | gist