css - SASS @each 复制带占位符的选择器

Question

我在使用 SASS @extend

时遇到了一些问题

我有以下代码 http://codepen.io/anon/pen/AgCnF?editors=110

HTML

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>

SASS

$link-different: 1, 2

li
    @if $link-different != 0
        %different-background
            background: #000

        @each $different in $link-different
            &:nth-child(#{$different})
                @extend %different-background !optional
    @else

但它在 CSS 选择器路径上输出两个 li 元素

CSS 输出

li li:nth-child(1), li li:nth-child(2) {
  background: black;
}

所需的 CSS 输出

如何让它输出这个？

li:nth-child(1), li:nth-child(2) {
  background: black;
}

Answer 1

在 sassmeister 上尝试此代码

$link-different: 1, 2

%different-background
  background: #000


li

  @if $link-different != 0

    @each $different in $link-different

      &:nth-child(#{$different}) 
        @extend %different-background !optional

  @else

---

输出

li:nth-child(1), li:nth-child(2) {
  background: black; 
}