Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
56 replies
vince

Simple Sass @extends and % issue

I'm probably doing something stupid, but I have the following code:

%list {
  @include mixins.reset-list();

  &-navigation {
    display: none;

    @media (min-width: tokens.$bp-main-nav) {
      @include mixins.flex(row, center, center, 4);
    }
  }
}

.list {
  @extend %list;

  &-navigation {
    @extend %list-navigation;
  }
}


I want %list-navigation to extend the default styling from %list. From what I've read, this should work. I then have a class list-navigation that extends %list-navigation, but it's not inheriting the default styling, in this case the reset-list mixin. I have to correct class names in my HTML. Is this not how Sass works? It's not working for my other mixins either
Was this page helpful?