css - SCSS/萨斯 : How do i change a mixin to output specific CSS?

Question

我有一个用 SCSS/Sass 编写的函数，它使用 @each 函数循环 map 的每个元素。

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

在 map 的每个元素上也是一个 @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";
}

所需的 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";
}

如何更改@mixin 函数 来解决这个问题？

Answer 1

什么 &!

哦，太近了!当您想使用 & 链接/包含父选择器时，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";
}