Как это работает?

@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
  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, .intrusion.seriousError {
  background-image: url("/image/hacked.png"); 
}

.seriousError {
  border-width: 3px; 
}

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