SASS: How to use @extend in media queries?

Question

Sass

Problem: I defined 3 independent styles (prototypes) of navigation and effects for different resolutions, then I put all mixins, functions, prototypes in a separate .scss file
Then I tried to inherit styles outside of media queries - everything is ok, but in queries - Sass swears (supposedly @ extend must be applied in the same scope, i.e. @extend -ancestors must be predefined in the media query scope ).
How to get around guys?

Answer 1

In general, with the @extend directive, you need to be extremely careful, especially when using media queries. As you correctly noted, the media screen and (...) directive has its own scope, and therefore it does not work.
As a solution, I can advise using an approach like this:

%myclass {
  color: blue;

  @media (min-width: 600px) {
    background: red;
  }
  @media (min-width: 800px) {
    font-size: 28px;
  }
}

.class1 {
  @media (min-width: 600px) {
    @extend %myclass;
  }
}

.class2 {
  @media (min-width: 800px) {
    @extend %myclass;
  }
}

.class3 {
  @extend %myclass;
}

.class3 {
  color: blue;
}
@media (min-width: 600px) {
  .class1, .class3 {
    background: red;
  }
}
@media (min-width: 800px) {
  .class2, .class3 {
    font-size: 28px;
  }
}