Вивчайте Розширення стилів за допомогою директиви @extend

Четверта корисна функція дозволяє застосовувати заздалегідь визначені 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.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 7. Розділ 6

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how the @extend directive works in more detail?

Are there any limitations or drawbacks to using @extend in Sass?

Can you show an example of how to override other properties besides background-color?

Awesome!

Completion rate improved to 2.04

Свайпніть щоб показати меню