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定义中吗？但是，我没有尝试过，它可能会引发错误。

SCSS @extend内部媒体查询备选方案以避免重复属性

2 个答案: