Css 合并选择器@扩展问题

我对SCSS中的“@extend”指令有问题

    .header {
         .introduction-group {
         text-align: center;
         color: $white;
         width: 70%;
      }
    .about {
      &__description-group {
        @extend .introduction-group;

此代码块不工作。但是,

    .header {
         &__introduction-group {
         text-align: center;
         color: $white;
         width: 70%;
      }
    .about {
      &__description-group {
        @extend .header__introduction-group;

第二个有效。为什么?

谢谢。

如前所述，嵌套类不会与@extend一起应用。第二个代码块以包含父前缀的指定类为目标。第一个代码块没有，它只针对嵌套类

我做了一个小例子，以简单的方式说明这个问题。请确保您检查了，以获得更全面的解释

<h1 class="wrong">Test style gone wrong</h1>
<h1 class="right">Test style gone right</h1>
.test {
  .nested {
    color: red;
  }
  &-nested {
    color: red;
  }
}
.wrong {
  @extend .test;
  @extend .nested;
}
.right {
  @extend .test-nested;
}

测试风格出错
测试风格变好了
.测试{
.嵌套{
颜色：红色；
}
&-嵌套{
颜色：红色；
}
}
.错了{
@扩展测试；
@扩展.嵌套；
}
.对{
@扩展.测试嵌套；
}