Звичайний CSS (Cascading Style Sheets) — це основа стилізації будь-якого веб-сайту. Проте у великих проєктах чистий CSS швидко стає громіздким: доводиться повторювати однакові кольори, писати довгі селектори та тримати в голові складні каскадні зв’язки. У результаті код перетворюється на важкопідтримувану «локшину».
Для вирішення цієї проблеми були створені препроцесори стилів. Найпопулярнішим і найпотужнішим із них є Sass (Syntactically Awesome Style Sheets, Синтаксично чудові таблиці стилів). Він розширює можливості стандартного CSS, додаючи програмістські фічі: змінні, вкладеність, математичні операції та міксини.
1. Що таке Sass та чим він відрізняється від SCSS
Важливо розуміти термінологію: коли розробники кажуть «Sass», вони зазвичай мають на увазі всю технологію препроцесингу. Проте сам препроцесор підтримує два синтаксичні формати:
- Sass (оригінальний синтаксис): Використовує відступи замість фігурних дужок
{}та крапок з комою;(схожий на синтаксис Python або YAML). Сьогодні використовується рідко. - SCSS (Sassy CSS): Покращений і сучасний синтаксис, який є надмножиною CSS. Це означає, що будь-який валідний CSS-код є валідним SCSS-кодом. Він використовує звичні фігурні дужки та крапки з комою, що робить перехід на нього надзвичайно легким. Усі приклади нижче наведено саме для SCSS.
2. Порівняльний аналіз: Чистий CSS проти SCSS
| Можливість | Класичний CSS | SCSS (Sass) |
|---|---|---|
| Змінні | Нативні CSS-змінні (--main-color: #333) з підтримкою на рівні браузера. |
Препроцесорні змінні ($main-color: #333), які компілюються у звичайні значення. |
| Вкладеність (Nesting) | Відсутня. Треба писати довгі конструкції: .card {} .card .title {}. |
Підтримується. Дозволяє вкладати селектори один в один для зручності читання. |
| Повторення коду (DRY) | Вирішується через дублювання або складні класи-модифікатори. | Вирішується за допомогою міксинів (@mixin) та наслідування (@extend). |
| Виконання браузером | Браузер розуміє напряму. | Потребує попередньої компіляції (трансляції) у звичайний .css файл. |
3. Ключові переваги та можливості Sass (SCSS)
Ось п’ять головних фіч, заради яких варто почати використовувати препроцесор у своїх проєктах:
- Змінні ($): Зберігайте кольори, шрифти, відступи та розміри екранів в одному місці (наприклад, у файлі
_variables.scss). Зміна основного кольору бренду в одному рядку оновить весь сайт. - Вкладеність селекторів: Структура стилів починає повторювати HTML-розмітку, що значно підвищує читабельність коду.
- Модульність (Partials & @use / @import): Можливість розбити один величезний файл на десятки дрібних логічних модулів (шапка, кнопка, сітка) і збирати їх в один загальний файл стилів.
- Міксини (Mixins): Блоки коду, які можна багаторазово перевикористовувати з передачею аргументів (наприклад, міксин для швидкого створення медіа-запитів).
- Математичні операції: Можливість виконувати обчислення прямо в стилях (наприклад, ширина колонки:
width: 100% / 3 - 20px;).
4. Приклад коду: До і Після компіляції
Подивимося на простому прикладі, як SCSS перетворюється на звичайний CSS:
/* 1. SCSS-код, який пише розробник */
$primary-color: #3498db;
$spacing: 16px;
.card {
background-color: #ffffff;
padding: $spacing;
border-radius: 8px;
&__title {
color: $primary-color;
font-size: 1.5rem;
}
&__button {
background-color: $primary-color;
&:hover {
opacity: 0.8;
}
}
}
Після автоматичної компіляції препроцесором ми отримуємо стандартний CSS, який підключається до HTML-сторінки:
/* 2. Скомпільований CSS-код, який читає браузер */
.card {
background-color: #ffffff;
padding: 16px;
border-radius: 8px;
}
.card__title {
color: #3498db;
font-size: 1.5rem;
}
.card__button {
background-color: #3498db;
}
.card__button:hover {
opacity: 0.8;
}
Технічна порада розробника: Браузери не вміють напряму виконувати файли з розширенням
.scssабо.sass. Для роботи вам знадобиться інструмент компіляції. У сучасній веб-розробці це зазвичай налаштовується автоматично через збирачі проєктів (Vite, Webpack, Gulp) або за допомогою зручних плагінів для редактора коду (наприклад, розширення Live Sass Compiler у VS Code).
