Верстка сайту з використанням 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 прямо зараз.