Merging selector @extend issue

user_6755971 0
Viewed 37

I have a problem about "@extend" directive in SCSS.


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

This code block does not work. However,


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

Second one works. Why?

Thank you.

bem sass css
1 Answers

As mentioned here nested classes won't be applied with @extend. Your second code block targets the specified class including the parent prefix. The first code block doesn't, it only targets the nested class.

I made a small codepen demo to illustrate the problem in a simple way. Make sure you checkout the Sass docs for a more comprehensive explanation!

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