У яких випадках PostCSS використовується разом із препроцесорами?
PostCSS використовують разом із препроцесорами тоді, коли потрібно розділити завдання розробки і завдання продакшена. Препроцесор робить написання CSS зручнішим, а PostCSS доводить підсумковий код до оптимального стану для браузерів.
Коли їх поєднують на практиці
1) Для крос-браузерності після SASS/LESS Навіть якщо проєкт пишеться на SCSS, без PostCSS доведеться вручну стежити за префіксами. Тому ланцюжок зазвичай такий:
SASS/LESS → CSS → PostCSS (Autoprefixer) → підсумковий CSS2) Для мінімізації та оптимізації підсумкового CSS
Препроцесор не мінімізує і не чистить код, а PostCSS-плагіни (наприклад, cssnano) роблять це автоматично.
3) Для використання сучасних CSS-фіч
Якщо в SCSS застосовуються нові можливості CSS, PostCSS із плагіном postcss-preset-env перетворює їх на сумісний код під поточні браузери.
4) Для видалення зайвих стилів у продакшені
Інструменти на кшталт PurgeCSS працюють тільки після того, як стилі вже згенеровані. Це не завдання препроцесора.
Розподіл ролей
| Етап | Інструмент | Що робить |
|---|---|---|
| розробка | SASS/LESS | змінні, вкладеність, міксини і зручний синтаксис |
| збірка/продакшен | PostCSS | префікси, мінімізація, очищення, оптимізація |
Підсумок
PostCSS використовують разом із препроцесорами тоді, коли потрібно:
- писати код зручно (препроцесор)
- і водночас випускати його в продакшен максимально чистим, оптимізованим і крос-браузерним (PostCSS)
Тобто інструменти не конкурують, а доповнюють один одного в одному пайплайні.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.