如何解决 SassError: Invalid parent selector "*"？答案

【问题标题】：How to solve SassError: Invalid parent selector "*"?如何解决 SassError: Invalid parent selector "*"？
【发布时间】：2020-05-30 08:02:55
【问题描述】：

我有一个 Angular 9 应用程序，当我使用这个 sn-p SCSS 时，它返回此错误：

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

这是sn-p：

$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 > *等等。

【问题讨论】：

标签： css sass node-sass

【解决方案1】：

@Yosef 描述的内容是正确的 - 但是，有一些事情需要考虑

在地图上使用@each 循环时，顺序为$key, $value。

为了最小化 CSS 输出，将 @each 循环移动到 inside 媒体查询中——例如：

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

最后但同样重要的是考虑完全不要这样做——改用attribute selector——这样你就可以在一个选择器中处理所有事情:-)

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

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

【讨论】：

【解决方案2】：

1.你想在value >之后选择*，意味着你应该在mixin中添加它

2. 您要选择-#{$value} 而不仅仅是&#{$value}。所以A-你必须添加-，而B-为$value=""-不存在。所以可能你应该特别注意它。

很快，将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;
  }
}

【讨论】：