Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить директива @extend?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

`@extend` у SCSS - це директива, яка дає змогу одному селектору **успадковувати** стилі іншого селектора, об'єднуючи їх у спільний CSS-блок. На відміну від міксинів, `@extend` **не вставляє копію коду**, а **розширює наявний селектор**, додаючи новий у той самий набір правил.

---

### Приклад

```scss
.message {
  padding: 10px;
  border: 1px solid;
}

.success {
  @extend .message;
  border-color: green;
}
```

### Результат компіляції

```css
.message, .success {
  padding: 10px;
  border: 1px solid;
}

.success {
  border-color: green;
}
```

---

### Що важливо розуміти

**1.** `@extend` **об'єднує селектори, а не дублює код**
У результаті з'являється спільний CSS-блок, до якого прив'язані обидва селектори. Це зменшує розмір підсумкового файлу.

**2.** `@extend` **працює тільки із селекторами**
Він не підставляє окремі властивості, як міксин.

**3.** `@extend` **може впливати на специфічність і породжувати несподівані ефекти**
Якщо в проєкті складні комбінації селекторів, `@extend` може об'єднати їх занадто широко, і в результаті стилі застосуються там, де не планувалося.

---

**Короткий висновок:**
`@extend` - це інструмент для успадкування стилів між селекторами, що економить підсумковий CSS, але потребує обережності у великих проєктах. Багато команд віддають перевагу міксинам, тому що вони більш передбачувані і не втручаються в структуру селекторів.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати189 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.