合并选择器@extend 问题

Question

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

第二个有效。为什么？

谢谢。

Answer 1

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

我做了一个小codepen demo to illustrate the problem in a simple way. Make sure you checkout the 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;
}

合并选择器@extend 问题

Merging selector @extend issue

css

sass

bem