Що робить директива @extend?
@extend у SCSS - це директива, яка дає змогу одному селектору успадковувати стилі іншого селектора, об'єднуючи їх у спільний CSS-блок. На відміну від міксинів, @extend не вставляє копію коду, а розширює наявний селектор, додаючи новий у той самий набір правил.
Приклад
.message {
padding: 10px;
border: 1px solid;
}
.success {
@extend .message;
border-color: green;
}Результат компіляції
.message, .success {
padding: 10px;
border: 1px solid;
}
.success {
border-color: green;
}Що важливо розуміти
1. @extend об'єднує селектори, а не дублює код
У результаті з'являється спільний CSS-блок, до якого прив'язані обидва селектори. Це зменшує розмір підсумкового файлу.
2. @extend працює тільки із селекторами
Він не підставляє окремі властивості, як міксин.
3. @extend може впливати на специфічність і породжувати несподівані ефекти
Якщо в проєкті складні комбінації селекторів, @extend може об'єднати їх занадто широко, і в результаті стилі застосуються там, де не планувалося.
Короткий висновок:
@extend - це інструмент для успадкування стилів між селекторами, що економить підсумковий CSS, але потребує обережності у великих проєктах. Багато команд віддають перевагу міксинам, тому що вони більш передбачувані і не втручаються в структуру селекторів.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.