Директива @extend

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

<sxh scss>
<div class="error seriousError">
  Внимание! Ваш аккаунт был взломан.
</div>
</sxh>

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

<sxh css>
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}
</sxh>

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

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

<sxh scss>
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
</sxh>

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

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

.seriousError {
  border-width: 3px;
}
</sxh>

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

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

<sxh css>
.error.intrusion {
  background-image: url("/image/hacked.png");
}
</sxh>
Тогда элемент <div class="seriousError intrusion"> также будет иметь фон из hacked.png.