Що робить @if у SCSS?
@if у SCSS - це директива умовного розгалуження, яка дає змогу виконувати різні блоки коду залежно від заданої умови. Вона схожа на умовний оператор у мовах програмування і застосовується всередині препроцесора до компіляції, впливаючи на те, які стилі потраплять у підсумковий CSS.
Приклад
scss
$theme: dark;
@if $theme == dark {
body {
background: #111;
color: #fff;
}
} @else {
body {
background: #fff;
color: #111;
}
}У підсумковий CSS потрапить тільки один варіант - той, чий блок пройшов умову.
Де це корисно
- Темна/світла тема
- Генерація різних сіток під різні параметри
- Створення адаптивних стилів під конфігурації проєкту
- Оптимізація підсумкового CSS, виключаючи зайвий код
Ключовий сенс @if
Він дає можливість додавати просту логіку в SCSS, роблячи стилі динамічнішими і керованішими, без дублювання однакових блоків.
Готовий продовжувати в цьому ж форматі. Дай знати, коли поставиш наступне питання.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.