SCSS/Sass：如何更改mixin以输出特定CSS？

我有一个用SCSS/Sass编写的函数，它使用

@each

函数循环

映射的每个项

  $classes-map: ("class-a": "doesntmatter",
          "class-b": "doesntmatter",
          'class-c': 'doesntmatter');

  @mixin function {
      @each $class, $property in $classes-map {
        %#{$class} {
          content: $property;
        }
        @for $i from 1 to 4 {
          &.#{$class}-#{$i} {
            @extend %#{$class};
          }
        }
      }
    }

在地图的每一项上都有一个
@for
循环，用来列出带有komma的类，每次都有一个不同的数字

以下是输出应该是什么：

.class-a-1, .class-a-2, .class-a-3 {
  content: "doesntmatter";
}

.class-b-1, .class-b-2, .class-b-3 {
  content: "doesntmatter";
}

.class-c-1, .class-c-2, .class-c-3 {
  content: "doesntmatter";
}

我使用以下代码调用此函数：

.parent {
  &.child {
      @include function;
  }
}

CSS

.parent.child .parent.child.class-a-1, .parent.child .parent.child.class-a-2, .parent.child .parent.child.class-a-3 {
  content: "doesntmatter";
}
.parent.child .parent.child.class-b-1, .parent.child .parent.child.class-b-2, .parent.child .parent.child.class-b-3 {
  content: "doesntmatter";
}
.parent.child .parent.child.class-c-1, .parent.child .parent.child.class-c-2, .parent.child .parent.child.class-c-3 {
  content: "doesntmatter";
}

.parent.child.class-a-1, .parent.child.class-a-2, .parent.child.class-a-3 {
   content: "doesntmatter";
}
.parent.child.class-b-1, .parent.child.class-b-2, .parent.child.class-b-3 {
   content: "doesntmatter";
}
.parent.child.class-c-1, .parent.child.class-c-2, .parent.child.class-c-3 {
   content: "doesntmatter";
}

所需CSS

.parent.child .parent.child.class-a-1, .parent.child .parent.child.class-a-2, .parent.child .parent.child.class-a-3 {
  content: "doesntmatter";
}
.parent.child .parent.child.class-b-1, .parent.child .parent.child.class-b-2, .parent.child .parent.child.class-b-3 {
  content: "doesntmatter";
}
.parent.child .parent.child.class-c-1, .parent.child .parent.child.class-c-2, .parent.child .parent.child.class-c-3 {
  content: "doesntmatter";
}

.parent.child.class-a-1, .parent.child.class-a-2, .parent.child.class-a-3 {
   content: "doesntmatter";
}
.parent.child.class-b-1, .parent.child.class-b-2, .parent.child.class-b-3 {
   content: "doesntmatter";
}
.parent.child.class-c-1, .parent.child.class-c-2, .parent.child.class-c-3 {
   content: "doesntmatter";
}

如何更改
@mixin函数
以解决此问题？
什么是&

哦，太近了！当您想使用
&
链接/包含父选择器时，mixin中的任何内容都应该遵循。缺少的部分是占位符
&%#{$class}

SCSS:

$classes-map: ("class-a": "doesntmatter",
        "class-b": "doesntmatter",
        'class-c': 'doesntmatter');

@mixin function {
  @each $class, $property in $classes-map {
    &%#{$class} {
      content: $property;
    }
    @for $i from 1 to 4 {
      &.#{$class}-#{$i} {
        @extend %#{$class};
      }
    }
  }
}

.parent {
  &.child {
    @include function;
  }
}

CSS：

.parent.child.class-a-1, .parent.child.class-a-2, .parent.child.class-a-3 {
  content: "doesntmatter";
}
.parent.child.class-b-1, .parent.child.class-b-2, .parent.child.class-b-3 {
  content: "doesntmatter";
}
.parent.child.class-c-1, .parent.child.class-c-2, .parent.child.class-c-3 {
  content: "doesntmatter";
}