How to solve SassError: Invalid parent selector "*"?

Question

I have an Angular 9 app and when I use this snippet SCSS it returns this error:

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

This is the snippet:

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

I want in output classes for each value like: display > *, display-one > *, display-two > *and so on.

Answer 1

1. You want to select * after the value >, means you should add it in the mixin

2. You want select -#{$value} and not just &#{$value}. So A- you have to add the -, and B- for $value="" the - is not exist. so probably you should give it special attention.

Shortly, change the scss to

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

Output:

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