SASS: Как применять @extend в медиа запросах?

Question

[2beats4hits]

Проблема: Я определил 3 независимых стиля(прототипа) навигации и эффектов для различных разрешений, дальше сунул все миксины, функции, прототипы в отдельный файл .scss

Далее попытался унаследовать стили вне медиа запросов - всё ок, в запросах же - Sass ругается(якобы @extend нужно применять в той же области, т.е. @extend-предки должны быть предопределены в области медиа запросов).

Как обойти ребят?

Answer 1

[Виталий Сорокин]

Вообще с директивой @extend, нужно быть крайне аккуратным, тем более при использовании медиа запросов. Как вы правильно заметили, у директивы media screen and (...) своя область видимости, и поэтому он не работает.
Как решения могу посоветовать использовать подход вроде этого:

input.scss

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

output.css

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