Каждый, кто писал стили на чистом 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)
• Исключение папок из watch (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 секунд.