SCSS @extend 在媒体查询替代方案中避免重复属性

Question

在SCSS 中，您可以使用@mixin 和@extend 来重用代码。例如：

%even-row { background: pink; }

@mixin even-rows-mixin($columns) {
    @for $i from 1 through $columns {
        &:nth-child(#{2 * $columns}n + #{$i + $columns}) {
            @extend %even-row;
        }
    }
}

li {
    @include even-rows-mixin(8);
    width: 12%;
}

将生成：

li:nth-child(16n + 9),
li:nth-child(16n + 10),
li:nth-child(16n + 11),
li:nth-child(16n + 12),
li:nth-child(16n + 13),
li:nth-child(16n + 14),
li:nth-child(16n + 15),
li:nth-child(16n + 16) {
    background: pink;
}

li {
    width: 12%;
}

但是，我想在媒体查询中使用 mixin，这是不可能的：

@media (max-width: X) {
    li {
        @include even-rows-mixin(8);
        width: 12%;
    }
}

@media (max-width: Y) {
    li {
        @include even-rows-mixin(4);
        width: 16%;
    }
}

这会抛出一个错误：

You may not @extend an outer selector from within @media. You may only 
@extend selectors within the same directive. From "@extend %even-row"
on line N.

我可以删除@extend 并内联mixin 中的属性：

@mixin even-rows-mixin($columns) {
    @for $i from 1 through $columns {
        &:nth-child(#{2 * $columns}n + #{$i + $columns}) {
            background: pink;
        }
    }
}

但这会产生重复的代码：

@nth-child(16n + 9)  { background: pink; }
@nth-child(16n + 10) { background: pink; }

...

@nth-child(16n + 16) { background: pink; }

我想知道是否有更好的方法来编写此代码，而无需生成重复的属性或不必手动编写所有可能的选择器，可能使用插值或其他一些我不知道的功能。

这个问题是在回答了另一个问题后提出的：How to select even rows with list items，如果您想了解整个事情，请作为参考。

Answer 1

你可以用整个选择器组构造一个选择器变量。

@mixin even-rows-mixin($columns, $rule) {
   $selector : '';
    @for $i from 1 through $columns {
      $selector:  $selector + $rule + '('+ #{2 * $columns}n  + "+" + #{$i + $columns} + ') ,';
    }  
  #{$selector} {
    @content;
  }
}

li {
    width: 12%;
}
@include even-rows-mixin(8, 'li:nth-child') {
 background-color: pink; 
};

注意：由于某种原因，它在 codepen 编辑器中不起作用。但它正在使用 node-sass

Answer 2

你能把%even-row 放在mixin 定义中吗？不过我没试过，可能会报错。