Вступні дані про Sass: Як препроцесори роблять написання стилів швидким та зручним

Звичайний 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

3. Ключові переваги та можливості Sass (SCSS)

Ось п’ять головних фіч, заради яких варто почати використовувати препроцесор у своїх проєктах:

1. Змінні ($): Зберігайте кольори, шрифти, відступи та розміри екранів в одному місці (наприклад, у файлі _variables.scss). Зміна основного кольору бренду в одному рядку оновить весь сайт.
2. Вкладеність селекторів: Структура стилів починає повторювати HTML-розмітку, що значно підвищує читабельність коду.
3. Модульність (Partials & @use / @import): Можливість розбити один величезний файл на десятки дрібних логічних модулів (шапка, кнопка, сітка) і збирати їх в один загальний файл стилів.
4. Міксини (Mixins): Блоки коду, які можна багаторазово перевикористовувати з передачею аргументів (наприклад, міксин для швидкого створення медіа-запитів).
5. Математичні операції: Можливість виконувати обчислення прямо в стилях (наприклад, ширина колонки: 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).