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循环生成选择器链,然后将其注入带插值的规则:

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

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

例子 | 要旨