Директива @extend

Бывают случаи, когда один селектор должен иметь все стили другого, а также свои собственные. Самый распространенный способ - использовать общий селектор, либо более специфический. Допустим, у нас есть дизайн обычной ошибки и серьезной ошибки. Мы используем такой вариант разметки:

  Внимание! Ваш аккаунт был взломан.

а стили наши выглядят так:

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

К сожалению, это означает, что мы должны помнить о том, что класс .error нужно использовать с классом .seriousError. Такой расклад является не удобным, а бывает даже так, что это несет в себе семантические ошибки в разметке.

Директива @extend позволяет избежать данных проблем, сообщая Sass, что один селектор должен наследовать стили другого. Например:

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

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

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

.seriousError
  @extend .error
  border-width: 3px

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

.seriousError {
  border-width: 3px;
}

Это означает, что все объявляемые стили для .error будут применяться и к .seriousError, в дополнение к характерным для .seriousError. В результате получается, что все элементы с классом .seriousError технически также будут иметь класс .error.

Другие правила, используемые .error, будут также применяться и для .seriousError. Например, у нас есть специальные стили для ошибок, вызванных атакой хакеров:

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

Тогда элемент <div class="seriousError intrusion"> также будет иметь фон из hacked.png.