Кожен, хто писав стилі на чистому CSS, знає цей біль: сотні рядків, вкладені селектори, повторювані кольори та медіа-запити, розкидані файлом абияк. Змінні? Міксини? Вкладеність? У vanilla CSS це або милиці з кастомними властивостями, або очікування наступної чернетки специфікації.

SASS вирішує ці проблеми вже півтора десятиліття. Але мало просто писати на SASS, потрібно, щоб код автоматично перетворювався на стиснутий, production-ready CSS без зайвих рухів. Редактор Atom, для якого колись писали плагін sass-autocompile, офіційно закрито з грудня 2022. Самі плагіни мертві разом із ним.

На щастя, інструменти стали тільки кращими. У цьому матеріалі, актуальний на 2026 рік спосіб налаштувати компіляцію та мініфікацію так, щоб воно просто працювало: без Atom, без милиць, у будь-якому редакторі.

💡 Швидкий огляд:

• Встановіть Dart Sass CLI, офіційну реалізацію SASS
• Запустіть sass --watch для автокомпіляції під час збереження
• Додайте --style=compressed для мініфікації на льоту
• Для тонкої оптимізації підключіть cssnano або Lightning CSS
• Як варіант, використовуйте Live Sass Compiler у VS Code

Навіщо компілювати SASS: браузер не розуміє.scss

Браузеру потрібен звичайний .css. Крапка. Щоразу, коли ви виправили змінну чи міксин, потрібен крок компіляції. Вручну ганяти sass input.scss output.css після кожного збереження, шлях у пекло. Особливо коли файлів десятки, а проєкт збирається з паршалів _partial.scss.

Автоматична компіляція під час збереження, стандарт індустрії. Сьогодні вона реалізована в Dart Sass буквально однією командою. Плюс мініфікація в тому ж потоці: на виході не просто .css, а одразу .min.css, готовий до деплою.

Нижче, три рівні налаштування: CLI для будь-яких редакторів, інтеграція у VS Code та просунута мініфікація постпроцесорами.

Спосіб 1: Dart Sass CLI, універсальний підхід

Dart Sass, офіційна еталонна реалізація SASS, написана на Dart. З 2020 року вона повністю замінила застарілі Ruby Sass і LibSass/node-sass. Актуальна версія на червень 2026, 1.101.0.

Встановлення

Найпростіший шлях, через npm глобально:

1
npm install -g sass

Перевірте, що все встановилося:

1
sass --version

Альтернативи: choco install sass (Windows, Chocolatey), brew install sass/sass/sass (macOS, Homebrew) або прямий архів з GitHub, без зовнішніх залежностей, просто розпакувати й додати до PATH.

Базова компіляція

Скомпілювати файл вручну:

1
sass styles/main.scss dist/main.css

Але головна сила, у watch-режимі. Він відстежує зміни у вихідних файлах і перекомпільовує автоматично:

1
sass --watch styles/:dist/

Усе. Виправили _buttons.scss, Dart Sass миттєво перезібрав main.css. Жодних плагінів редактора, жодних мертвих пакунків Atom. Працює в будь-якому редакторі та на CI.

Мініфікація на льоту

Прапор --style=compressed прибирає пробіли, перенесення та коментарі. На виході, production-готовий .min.css:

1
sass --watch styles/:dist/ --style=compressed

Для більшості проєктів цього достатньо. Dart Sass compressed вирізає все зайве, файл стає відчутно легшим за вихідний. Якщо потрібна хірургічна точність, дивіться розділ про cssnano нижче.

Структура проєкту з паршалами

Типовий проєкт збирається з десятка паршалів, файлів із префіксом _, які SASS не компілює окремо, а вставляє в головний файл через @use:

1
// main.scss
2
@use 'variables';
3
@use 'mixins';
4
@use 'header';
5
@use 'footer';

Dart Sass стежить за всім ланцюжком залежностей. Змінили _variables.scss, перезібрався main.css. Змінюєте паршал, вкладений в інший паршал, усе одно спрацьовує. Магія @use та @forward описана в офіційній документації.

Спосіб 2: VS Code + Live Sass Compiler, компіляція без консолі

Якщо консоль, не ваш робочий інструмент, у VS Code є Live Sass Compiler від Glenn Marks. Розширення має 2,65 мільйона встановлень і повністю замінює CLI-підхід для повсякденного верстання.

Що воно вміє:

• Жива компіляція .scss → .css під час кожного збереження (Ctrl+S)
• Вибір стилю виводу: expanded (читабельний) або compressed (мініфікований)
• Автопрефікси через налаштування
• Налаштовувана вихідна папка та розширення (.css або .min.css)
• Виключення папок зі спостереження (node_modules, dist)
• Швидке ввімкнення/вимкнення зі статус-бару

Встановлення: Ctrl+P → ext install glenn2223.live-sass → у статус-барі внизу з'являється кнопка Watch Sass. Натиснули, і всі .scss-файли в проєкті автоматично компілюються під час збереження.

На відміну від CLI, не потрібно пам'ятати шляхи до вхідних і вихідних папок, розширення обчислює їх за файловою структурою. Мінус: працює тільки у VS Code, не на CI.

Спосіб 3: Просунута мініфікація, cssnano та Lightning CSS

Вбудований --style=compressed робить базову мініфікацію: прибирає пробіли та коментарі. Але він не оптимізує на рівні CSS-правил. Тут у гру вступають постпроцесори.

Cssnano

cssnano, найпопулярніший CSS-мініфікатор в екосистемі npm, побудований на PostCSS. Він робить те, чого не вміє Dart Sass:

• Схлопує ідентичні правила в одне
• Прибирає дубльовані @import
• Скорочує hex-кольори (#ffffff → #fff)
• Конвертує значення часу (0.5s → .5s)
• Видаляє порожні @media та коментарі
• Об'єднує сусідні правила з однаковими селекторами

cssnano працює після компіляції SASS, на вже готовому .css. Типовий ланцюжок: SASS-компіляція → PostCSS з autoprefixer → cssnano:

1
sass styles/:dist/ && postcss dist/*.css --use autoprefixer cssnano -d dist/

Для некритичних проєктів оверхед не виправданий. Для production з аудиторією 100K+ кожна сотня збережених байтів множиться на трафік.

Lightning CSS

Lightning CSS, написаний на Rust мініфікатор від команди Parcel. Позиціюється як «у 100 разів швидший за PostCSS» і за внутрішніми тестами обробляє понад 2,7 мільйона рядків коду за секунду на одному потоці. Крім мініфікації він уміє:

• Транспіляцію сучасного CSS у сумісний (CSS Nesting → пласкі селектори)
• Автопрефікси за browserslist
• Скорочення rgba() та hsla() до сучасних форматів

Мінус, відносна молодість і менша екосистема плагінів порівняно з PostCSS. Для нового проєкту на 2026 рік, варіант, який варто як мінімум подивитися.

На відео, півторагодинний Sass Crash Course від Traversy Media: від встановлення Dart Sass і синтаксису SCSS до змінних, міксинів, @use/@forward та організації файлів. Усі приклади актуальні та працюють у 2026.

⁉️🤔 Часті запитання

node-sass видає помилку під час встановлення, що робити?

node-sass офіційно визнано застарілим з жовтня 2020. Встановіть Dart Sass: npm install -g sass. Той самий API sass, але без бінарних проблем під Windows і без Python/Visual C++ у залежностях. Усі сучасні проєкти, на Dart Sass.

Live Sass Compiler не бачить мої SCSS-файли, у чому річ?

Перевірте, чи вихідні файли не виключено в налаштуваннях. F1 → Live Sass: Watch Sass має показати в рядку стану «Watching». Якщо ні, перевірте liveSassCompile.settings.partialsList у .vscode/settings.json: типово паршали /**/_*.s[ac]ss не компілюються окремо — це нормально.

Чи можна змішувати SASS з іншими препроцесорами в одному проєкті?

Технічно так, файли .scss і .less можуть лежати поруч. Практично, не робіть так. Різні препроцесори мають різний синтаксис міксинів і змінних, плагіни редактора конфліктують, а нові члени команди плутаються. Оберіть щось одне: у 2026 це SASS (SCSS-синтаксис) для переважної більшості проєктів.

Чи потрібен cssnano, якщо вже використовується --style=compressed?

Для типового сайту на WordPress чи лендингу, ні. --style=compressed дає майже весь потрібний результат. cssnano має сенс підключати, коли кожен кілобайт на вагу золота: high-traffic проєкти, Progressive Web Apps, мобільні вебзастосунки з метриками Core Web Vitals.

Atom Editor закрито, куди мігрувати налаштування SASS-компіляції?

Код і стилі ніяк не пов’язані з компілятором SASS. Самі .scss-файли та структура проєкту не залежать від редактора. Перенесіть теку проєкту у VS Code (code .), встановіть Live Sass Compiler і продовжуйте роботу. Або просто запустіть sass --watch у терміналі, він працює однаково у VS Code, WebStorm, Sublime і навіть у Notepad.

Який інструмент обрати під вашу задачу

Три рівні, три сценарії. Обирайте під свій біль, а не під чужий стек із туторіалу.

Лише верстка, без CI/CD. Встановлюйте Live Sass Compiler у VS Code. Жодної консолі, пара кліків, і працює. expanded для розробки, compressed перед деплоєм. 2,65 мільйона встановлень не брешуть.

Командна розробка, CI, бекендери поруч. Dart Sass CLI із прапорцем --watch і --style=compressed. Одна команда в скрипті package.json, і в усіх однакова поведінка, від мака до лінукс-сервера. Без прив’язки до редактора.

Production з аудиторією. Додайте cssnano в PostCSS-ланцюжок або спробуйте Lightning CSS. Економія відносно чистого --style=compressed на тисячах запитів на годину перетворюється на мегабайти й мілісекунди метрик.

SASS як мова живий і домінує. Atom помер. Інструменти компіляції стали простішими, а не складнішими: Dart Sass CLI покриває практично всі сценарії без плагінів і графічних налаштувань. Спробуйте sass --watch прямо зараз — це займе 30 секунд.