Sass @extend та успадкування
Sass директива @extend
Директива @extend дозволяє поділитися набором властивостей CSS від одного селектора до іншого.
Директива @extend якщо у вас є елементи з майже ідентичним стилем, які відрізняються лише деякими дрібними деталями.
У наступному прикладі Sass спочатку створюється базовий стиль для кнопок (цей стиль використовуватиметься для більшості кнопок). Потім ми створюємо один стиль для кнопки "Звіту" та один стиль для кнопки "Надіслати". Обидві кнопки "Звіт" та "Надіслати" успадковують всі властивості CSS від класу .button-basic через директиву @extend. Крім того, вони мають власні кольори:
SCSS Синтаксис:
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
Після компіляції CSS буде виглядати так:
CSS виведення:
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
Використовуючи директиву @extend, вам не потрібно вказувати кілька класів для елемента у вашому HTML-коді, наприклад: <button class="button-basic button-report">Повідомити про це</button>. Вам просто потрібно вказати .button-report, щоб отримати обидва набори стилів.
Директива @extend допомагає зберегти ваш код Sass дуже DRY.
