PostCSS, Sass или Lightning CSS
Все три инструмента обрабатывают CSS перед публикацией, но задачи у них разные. Sass — язык поверх CSS. PostCSS — конвейер плагинов. Lightning CSS — готовый быстрый обработчик без плагинов. Их часто используют вместе, поэтому полезно понимать, где проходит граница.
Сравнение
| Sass | PostCSS | Lightning CSS | |
|---|---|---|---|
| Что это | Язык, компилируется в CSS | Парсер и плагины на JavaScript | Готовая программа на Rust |
| Входные файлы | .scss, .sass | Обычный .css | Обычный .css |
| Миксины, функции, циклы | Да | Только через плагины | Нет |
| Префиксы по Browserslist | Нет | Autoprefixer | Встроены |
| Новый CSS для старых браузеров | Нет | postcss-preset-env | Встроено, часть возможностей |
| Сжатие | Простое | cssnano | Встроено |
| Свои плагины | Нет | Да, на JavaScript | Ограниченно |
| Скорость | Высокая | Зависит от плагинов | Очень высокая |
Как они сочетаются
Sass и PostCSS не соперники. Типичная цепочка: Sass собирает стили из модулей и миксинов, а PostCSS добавляет префиксы и сжимает. В Vite это происходит само: файл .scss сначала компилируется Sass, а результат проходит через postcss.config.js.
styles/main.scss → Sass → CSS → PostCSS (preset-env) → css/main.cssLightning CSS чаще всего работает незаметно: Vite 8 сжимает им CSS при сборке, а Tailwind CSS 4 обрабатывает им свой результат. Его выбирают отдельно, когда нужна максимальная скорость, а набор возможностей из коробки устраивает.
Что выбрать
| Ситуация | Выбор |
|---|---|
| Проект на Vite, обычный CSS | Достаточно самого Vite; postcss-preset-env — если нужны @custom-media или широкий список браузеров |
| Сайт без сборщика, нужна поддержка старых браузеров | postcss-cli с postcss-import, postcss-preset-env и cssnano |
| Большая система стилей с миксинами и вычислениями | Sass, а после него PostCSS или Vite |
| Проект на Tailwind CSS 4 | Tailwind сам решает префиксы и импорт, PostCSS не нужен или нужен только как точка подключения |
| Нужна особая обработка, например px в rem или свои правила | PostCSS с плагином, готовым или своим |
Главный вопрос — нужно ли вам что-то, чего нет в обычном CSS. Переменные, вложенность, calc() и слои уже есть в браузерах. Если не хватает только совместимости, берите PostCSS или Lightning CSS. Если нужны миксины и циклы — Sass.
Частая ошибка
Ставить все инструменты сразу «чтобы было». Sass, PostCSS с Autoprefixer и postcss-preset-env, отдельный Lightning CSS и cssnano в одном проекте дублируют друг друга: префиксы и сжатие делаются по нескольку раз, а при ошибке трудно понять, какой шаг её внёс. Начните с минимума — например, с одного Vite — и добавляйте инструмент только под конкретную задачу.