Що таке змінні в препроцесорах?
Змінні в CSS-препроцесорах - це імена, за якими закріплені певні значення (колір, розмір, шрифт, інтервал тощо), щоб їх можна було багаторазово використовувати в різних місцях стилів. Препроцесор під час компіляції підставляє значення змінних у підсумковий CSS, позбавляючи від повторень і ручного пошуку значень у великому проєкті.
Використовуються вони, наприклад, так:
scss
$main-color: #2b6cb0;
$padding: 16px;
.button {
color: $main-color;
padding: $padding;
}У результаті компіляції вийде звичайний CSS:
css
.button {
color: #2b6cb0;
padding: 16px;
}Головні завдання змінних
- централізація значень - одне джерело істини, не потрібно змінювати те саме в десятках місць;
- зниження дублювання - менше повторюваних рядків у коді;
- просте керування темами і масштабованість - можна змінювати дизайн проєкту, змінюючи значення тільки у файлі зі змінними.
Тобто змінні роблять код стійким, передбачуваним і зручним для підтримки.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.