合并选择器@extend问题

问题描述

我对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;

第二个作品。为什么？

谢谢。

解决方法

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

我做了一个小的codepen demo，以简单的方式说明了问题。确保您检出Sass docs以获得更全面的说明！

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