Четверта корисна функція дозволяє застосовувати заздалегідь визначені CSS-властивості з одного елемента до іншого, створюючи зв'язок між селекторами. Це означає, що один селектор може успадковувати властивості іншого селектора.

Тепер розгляньте зображення нижче, на якому показано два елементи кнопок:

Маємо дві кнопки: "send" та "submit". Єдина відмінність між цими елементами — значення властивості background-color. Тому можна визначити стилі для кнопки "send" і дозволити кнопці "submit" успадкувати ці стилі.

HTML-код:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Розглянемо, як можна успадковувати стилі за допомогою sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

Селектор .submit-button успадковує всі стилі від селектора .send-button за допомогою директиви @extend.