Верстка сайту з використанням SASS/SCSS
Починається все з болю: CSS-файл розростається до тисяч рядків, повтори вибивають з ритму, а зміна кольорової схеми перетворюється на квест «знайди та заміни». Ми пройшли через це десятки разів. Наша команда — 5+ років досвіду, 50+ завершених проєктів — використовує SCSS як стандарт де-факто для проєктів, де не потрібен CSS-in-JS. SCSS — це не магія, а інструмент: змінні, вкладеність, міксіни, функції та умовна логіка компілюються в чистий CSS без runtime-навантаження. Замовте SCSS-верстку під ключ — ми перетворимо ваш CSS у струнку систему.
Сьогодні еталонною реалізацією компілятора є Dart Sass; LibSass вважається застарілим. SCSS залишається стандартом для проєктів без React або з вимогою мінімального bundle без CSS-in-JS. Використання препроцесорів CSS на кшталт SCSS дозволяє скоротити обсяг CSS-коду до 40% і спростити підтримку. Типова економія часу при впровадженні SCSS — 20-30% на етапі рефакторингу та підтримки.
Чому SCSS кращий за чистий CSS?
| Можливість | Чистий CSS | SCSS |
|---|---|---|
| Змінні | CSS Custom Properties (динамічні) | SCSS-змінні (статична компіляція) |
| Вкладеність | Немає (тільки через каскад) | Повна підтримка вкладеності селекторів |
| Міксіни | Немає (дублювання) | Перевикористовувані блоки з параметрами |
| Функції | calc(), env() | Власні функції, математичні, кольорові |
| Умовна логіка | Немає | @if, @else, @for, @each |
| Розділення на модулі | @import (застарілий) | @use, @forward з просторами імен |
Що дає архітектура 7-1?
Архітектура 7-1 — це стандарт організації SCSS-проєкту, який масштабується без хаосу. 7 папок (abstracts, base, components, layout, pages, themes, vendors) і один головний файл. Кожна папка відповідає за свій шар: в abstracts зберігаються змінні, міксіни, функції; в base — скидання та типографіка; в components — перевикористовувані блоки на кшталт кнопок і карток. Це дозволяє легко знаходити та змінювати код, а також підключати тільки потрібні модулі (tree-shaking). Порівняйте: в плоскій структурі CSS-файл розростається до 5000+ рядків, а з 7-1 — кожна папка містить не більше 200 рядків. Економія часу на підтримку — до 50%.
Що входить в роботу з впровадження SCSS?
| Етап | Результат |
|---|---|
| Аудит поточного CSS | Виявлення дублів, неконсистентності, «вузьких» місць |
| Проектування архітектури | Створення каркасу 7-1 під ваш проєкт |
| Налаштування збірки | Dart Sass + Vite/Webpack, автопрефіксер, мініфікація |
| Розробка абстракцій | Змінні, міксіни, функції (fluid typography, focus ring) |
| Рефакторинг CSS → SCSS | Заміна стилів, видалення дублів, оптимізація селекторів |
| Тестування | Перевірка Core Web Vitals (LCP < 2.5s, CLS < 0.1, INP < 200ms) |
| Документація | Опис архітектури, інструкція з додавання нових стилів |
| Деплой та передача | Вихідники, скомпільований CSS, доступи (Git, хостинг) |
Як SCSS прискорює розробку?
Приклад структури папок:
src/styles/
abstracts/
_variables.scss
_colors.scss
_functions.scss
_mixins.scss
_index.scss
base/
_reset.scss
_typography.scss
_root.scss
components/
_button.scss
_card.scss
_nav.scss
layout/
_grid.scss
_header.scss
_footer.scss
pages/
_home.scss
_about.scss
main.scss
Впровадження SCSS-проєкту починається з налаштування компілятора. Для Vite достатньо встановити пакет sass і додати конфігурацію. Dart Sass підтримує сучасний API modern-compiler, який працює швидше і точніше. Ось базове налаштування:
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/abstracts" as *;`,
api: 'modern-compiler',
},
},
},
});
Ключові абстракції: змінні та міксіни
Змінні SCSS задають єдину систему відступів, розмірів шрифтів і брейкпоінтів. Їх зручно зберігати в окремому файлі та підключати через @use. Міксіни дозволяють уникнути дублювання: наприклад, медіа-запити, центрування або тримінг тексту.
// abstracts/_variables.scss
$grid-breakpoints: (
'xs': 0,
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1280px,
'2xl': 1536px,
) !default;
$container-max-widths: (
'sm': 540px,
'md': 720px,
'lg': 960px,
'xl': 1200px,
'2xl': 1400px,
) !default;
$spacers: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 0.75rem, 4: 1rem, 5: 1.5rem, 6: 2rem, 7: 3rem, 8: 4rem, 9: 6rem) !default;
$font-sizes: (
'xs': 0.75rem, 'sm': 0.875rem, 'base': 1rem, 'lg': 1.125rem, 'xl': 1.25rem, '2xl': 1.5rem, '3xl': 1.875rem, '4xl': 2.25rem, '5xl': 3rem
) !default;
Міксіни для адаптивної верстки та доступності:
// abstracts/_mixins.scss
@mixin respond-to($breakpoint) {
$value: map.get($grid-breakpoints, $breakpoint);
@if $value == null { @error 'Unknown breakpoint: #{$breakpoint}'; }
@media (min-width: $value) { @content; }
}
@mixin flex-center($direction: row) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: center;
}
@mixin truncate($lines: 1) {
@if $lines == 1 {
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
} @else {
display: -webkit-box; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; overflow: hidden;
}
}
@mixin visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
Процес впровадження SCSS в проєкт
- Аналіз — вивчаємо поточний CSS, знаходимо дублі та неконсистентність, визначаємо палітру та брейкпоінти.
- Проектування — створюємо каркас 7-1, розподіляємо існуючі стилі по папках.
- Налаштування збірки — встановлюємо Dart Sass, конфігуруємо Vite/Webpack, підключаємо автопрефіксер.
- Розробка абстракцій — пишемо змінні, міксіни, функції (fluid typography, focus ring).
- Рефакторинг — замінюємо чистий CSS на SCSS-модулі, видаляємо дублі, оптимізуємо селектори.
- Тестування — перевіряємо верстку на відповідність Core Web Vitals (LCP < 2.5s, CLS < 0.1, INP < 200ms).
- Деплой — компілюємо, мініфікуємо, передаємо проєкт з документацією.
Коли потрібна оптимізація CSS?
Якщо проєкт використовує CSS-модулі або інлайн-стилі, SCSS все одно може бути корисним для глобальних налаштувань та міксінів. Ми рекомендуємо SCSS для корпоративних сайтів, інтернет-магазинів та SaaS-платформ, де важлива швидкість завантаження та підтримуваність коду. В проєктах, де не використовуються CSS-модулі або CSS-in-JS, SCSS — оптимальний вибір для організації стилів.
Строки
Налаштування архітектури та базових абстракцій: 3–5 годин. Верстка типової сторінки з використанням готової системи міксінів — 2–4 години. Корпоративний сайт 5–8 сторінок: 4–7 днів. Точна оцінка залежить від складності дизайну та кількості унікальних компонентів. Вартість впровадження SCSS залежить від обсягу проєкту і розраховується індивідуально. Однак економія на підтримці окупає вкладення зазвичай за 2-3 місяці. Оцінимо ваш проєкт безкоштовно — напишіть нам з прикладом дизайну або посиланням на поточний сайт.
Наш досвід та гарантії
Ми виконали більше 50 проєктів на SCSS для e-commerce, корпоративних порталів та SaaS. Гарантуємо сумісність з усіма сучасними браузерами, оптимізацію Core Web Vitals та відсутність технічного боргу (регулярне оновлення Dart Sass). Якщо ваш CSS-файл став некерованим — зв'яжіться з нами. Отримайте консультацію щодо переходу на SCSS та попередню оцінку робіт. Замовте рефакторинг CSS прямо зараз.