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

Question

我有一个 Angular 9 应用程序，当我使用此片段 SCSS 时 returns 此错误：

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 >之后select*，意味着你应该在mixin中添加它

2. 你想要 select -#{$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;
  }
}

Answer 2

@Yosef描述的是正确的——但是，有几点需要考虑

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

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

@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.

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

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

css

sass

node-sass