Одиночный селектор может быть расширен больше, чем одним селектором. Это означает, что он наследует все стили всех расширяющих селекторов. Например:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

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

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

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

В результате, каждый элемент с классом .seriousError будет иметь класс .error, а также класс .attention. Таким образом, стили объявленные позже в документе имеют приоритет: фон .seriousError имеет цвет #ff0 и этот цвет предпочтительнее, чем #fdd, поскольку .attention объявлен позже, чем .error.

Множественное расширение может быть записано списком селекторов, разделенных запятыми. Например, @extend .error, .attention означает тоже самое, что и @extend .error; @extend .attention.


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