Множественные расширения

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

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

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

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

.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.