Как решить SassError: Неверный родительский селектор "*"?

Question

У меня есть приложение Angular 9, и когда я использую этот фрагмент S CSS, он возвращает эту ошибку:

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

I хочу в выходных классах для каждого значения, такого как: display > *, display-one > *, display-two > * и т. д.

Answer 1

То, что описывает @ Yosef , является правильным - однако есть несколько моментов, которые следует учитывать

При использовании циклов @each на картах порядок составляет $key, $value.

Чтобы минимизировать вывод CSS, переместите @each l oop внутрь медиазапроса, например:

@media (min-width: 300px) {
  //  move loop here
  @each $key, $value in $values {
    ...
  }
}


// CSS output without redundant media queries
@media (min-width: 300px) {
  .display > * {
    display: block;
  }
  .display-one > * {
    display: block;
  }
  .display-two > * {
    display: block;
  }
} 

Последний, но не менее важный не делайте этого в все - используйте вместо этого селектор атрибута - таким образом, вы можете обрабатывать все в одном селекторе: -)

@media (min-width: 300px) {
  [class|=display] > * { display: block; }
}

// This will match 
.display > *, .display-one > *, .display-two > *, .display-xxx > * etc.

Answer 2

1. Вы хотите выбрать * после value >, означает, что вы должны добавить его в миксин

2. Вы хотите выбрать -#{$value} а не просто &#{$value}. Так что A- вам нужно добавить -, а B- для $value="" - не существует. так что, вероятно, вам следует уделить этому особое внимание.

Вскоре замените s css на

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