SCSS @extend inside media query alternatives to avoid duplicate properties

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

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

在回答了另一个问题后，我想到了这个问题：，如果你想看一看整个事情，作为参考。

Answer 1

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

Answer 2

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

@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

一起工作

SCSS @extend inside media query alternatives to avoid duplicate properties

SCSS @extend inside media query alternatives to avoid duplicate properties

css

sass

extend

mixins

media-queries