Що таке вкладеність у препроцесорах?
Вкладеність у препроцесорах - це можливість писати селектори у вигляді ієрархії, що відображає структуру HTML, замість того щоб щоразу повторювати повний шлях селектора. Вкладений синтаксис робить код компактнішим, логічнішим і простішим для сприйняття.
Як це виглядає в SCSS
scss
.card {
padding: 20px;
.title {
font-size: 18px;
}
.btn {
color: red;
}
}У що це перетворюється після компіляції
css
.card {
padding: 20px;
}
.card .title {
font-size: 18px;
}
.card .btn {
color: red;
}Ключові моменти вкладеності
- селектори групуються за змістом - усе, що стосується
.card, розташоване поруч; - зменшується дублювання, тому що не потрібно писати
.card .title,.card .btnвручну; - структура стилів починає візуально збігатися зі структурою DOM.
Вкладеність - одна з найпомітніших зручностей препроцесорів, яка робить стилі чистішими й упорядкованішими у великих проєктах.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.