@extend работает по принципу добавления расширяющего селектора (в нашем случае это .seriuosError) в любой набор стилей, где встречается расширяемый селектор (в нашем случае - .error). Таким образом, пример из предыдущей главы:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

компилируется в

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

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

При слиянии селекторов директива @extend не допустит ошибок в виде дублирования, например, .seriuosError.seriuosError, самостоятельно исправляя данные ошибки на .seriuosError. Кроме того, директива не будет создавать селекторы, которые не смогут ничего значить, например, как #main#footer.


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