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; 
}