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

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

@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 {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}
Ошибка говорит о том, что директива @extend не может расширить .seriousError селектором .error, так как этот селектор описывается вне директивы @media print

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


На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.