Вложение @extend в директивы

Существуют некоторые ограничения применения @extend в директивах, таких как @media. Sass не в силах внедрить правила CSS, которые находятся снаружи блока @media и относятся к селектору внутри него, не создавая огромное количество стилей, благодаря копированию всех стилей в каждом случае. Это означает, что если вы используете @extend в @media (или в других директивах), то вы можете расширить только те селекторы, которые находятся в том же блоке директивы.

Например, правильное использование:

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }

  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

@media print
  .error
    border: 1px #f00
    background-color: #fdd

  .seriousError
    @extend .error
    border-width: 3px

и неправильное:

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

.error
  border: 1px #f00
  background-color: #fdd

@media print
  .seriousError
    @extend .error
    border-width: 3px

// INVALID EXTEND: .error is used outside of the "@media print" directive

Ошибка говорит о том, что директива @extend не может расширить .seriousError селектором .error, так как этот селектор описывается вне директивы @media print

Когда-нибудь мы надеемся на полную поддержку @extend в браузерах, что позволит использовать её в media и других директивах без ограничений.