Css 如何解决SassError：无效的父选择器*&引用；？

我有一个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>*

，等等。

1。如果您想在

值>

之后选择

*

，意味着您应该将其添加到混音中

2.您希望选择

-{$value}

而不仅仅是

&{$value}

。因此，A-您必须添加

-

，B-对于

$value=”“

而言，

-

不存在。所以你应该特别注意它

很快，将SCS更改为

$value:(
一:一,，
二:二,，
);
@mixin-gen（）{
@介质（最小宽度：300px）{
> * {
@内容
}
}
@每个$value，$输入$value{
@介质（最小宽度：300px）{
&-#{$value}>*{
@内容
}
}
}
}
@混合显示{
显示：块；
}
.展示{
@包括gen（）{
@包括显示（）；
}
}

1.如果要在

值>

之后选择

*

，则表示应将其添加到mixin中

2.您希望选择

-{$value}

而不仅仅是

&{$value}

。因此，A-您必须添加

-

，B-对于

$value=”“

而言，

-

不存在。所以你应该特别注意它

很快，将SCS更改为

$value:(
一:一,，
二:二,，
);
@mixin-gen（）{
@介质（最小宽度：300px）{
> * {
@内容
}
}
@每个$value，$输入$value{
@介质（最小宽度：300px）{
&-#{$value}>*{
@内容
}
}
}
}
@混合显示{
显示：块；
}
.展示{
@包括gen（）{
@包括显示（）；
}
}

所描述的内容是正确的–但是，有几件事需要考虑

在地图上使用@each循环时，顺序为

$key，$value

要最小化CSS输出，请将@each loop移动到媒体查询中，如：

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

最后但并非最不重要的一点考虑根本不这样做–使用一个选择器，这样您就可以在一个选择器中处理所有事情：-）

所描述的是正确的——但是，有一些事情需要考虑

在地图上使用@each循环时，顺序为

$key，$value

要最小化CSS输出，请将@each loop移动到媒体查询中，如：

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

最后但并非最不重要的一点考虑根本不这样做–使用一个选择器，这样您就可以在一个选择器中处理所有事情：-）