如何解决SassError：无效的父选择器“ *”？

Question

我有一个Angular 9应用，当我使用此代码段SCSS时，它将返回此错误：

SassError: Invalid parent selector "*"
   ╷
52 │         &#{$value} {
   │         ^^^^^^^^^^^^^^^
   ╵

这是代码段：

$values: (
  "":"",
  one: one,
  two: two,
);

@mixin gen() {
  @each $value, $key in $values {
    @media (min-width: 300px) {
      &#{$value} {
        @content
      }
    }
  }
}

@mixin display {
  display: block;
}

.display > * {
  @include gen() {
    @include display();
  }
}

我希望在输出类中获得每个值，例如：display > *，display-one > *，display-two > *等。

Answer 1

1。您想在*之后选择value >，这意味着您应该将其添加到mixin中

2。您想选择-#{$value}，而不仅仅是&#{$value}。因此，A-必须添加-，对于$value=""，B-不存在-。所以可能您应该特别注意。

简短地，将scss更改为

$values: (
        one: one,
        two: two,
);

@mixin gen() {
  @media (min-width: 300px) {
    > * {
      @content
    }
  }
  @each $value, $key in $values {
    @media (min-width: 300px) {
      &-#{$value} > * {
        @content
      }
    }
  }
}

@mixin display {
  display: block;
}

.display {
  @include gen() {
    @include display();
  }
}

输出：

@media (min-width: 300px) {
  .display > * {
    display: block;
  }
}
@media (min-width: 300px) {
  .display-one > * {
    display: block;
  }
}
@media (min-width: 300px) {
  .display-two > * {
    display: block;
  }
}