Що таке «інтерполяція» в SCSS?
Інтерполяція в SCSS - це механізм підстановки значення змінної (або виразу) всередину рядка, селектора або імені властивості за допомогою синтаксису #{$variable}. Вона використовується в тих ситуаціях, коли просте використання змінної неможливе або порушує синтаксис.
Для чого потрібна інтерполяція
- Створення динамічних селекторів
scss
$size: large;
.btn-#{$size} {
font-size: 20px;
}Підсумок:
css
.btn-large {
font-size: 20px;
}- Формування імен властивостей
scss
$prop: border;
.box {
#{$prop}-radius: 10px;
}Підсумок:
css
.box {
border-radius: 10px;
}- Вставка змінних усередину рядків
scss
$img: "header";
.block {
background: url("img/#{$img}.png");
}Підсумок:
css
.block {
background: url("img/header.png");
}Суть: інтерполяція дає змогу динамічно формувати CSS-код у тих місцях, де змінна має стати частиною рядка, імені або селектора, а не тільки значенням властивості. Вона додає гнучкості, особливо під час генерування однотипних класів, властивостей або тем.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.