Чим постпроцесор відрізняється від препроцесора (SASS/LESS)?
Постпроцесор і препроцесор вирішують різні завдання і працюють на різних етапах обробки CSS.
1. Момент роботи
| Інструмент | Коли застосовується |
|---|---|
| Препроцесор (SASS/LESS) | до отримання CSS - коду ще немає, він тільки генерується |
| Постпроцесор | після отримання CSS - до наявного CSS застосовується обробка |
2. Основна мета
| Інструмент | Для чого потрібен |
|---|---|
| Препроцесор | додати нові можливості (змінні, вкладеність, міксини, функції) і спростити написання стилів |
| Постпроцесор | поліпшити готовий CSS під продакшен (крос-браузерність, мінімізація, оптимізація) |
3. Тип змін
| Інструмент | Що робить |
|---|---|
| Препроцесор | генерує CSS на основі розширеного синтаксису |
| Постпроцесор | змінює вже готовий CSS, але не розширює мову |
4. Типові завдання
Препроцесор:
- змінні, вкладеність, міксини, функції
- модульна структура стилів
- зменшення дублювання
- зручність розробки
Постпроцесор:
- додавання вендорних префіксів (наприклад,
-webkit-) - мінімізація
- оптимізація фінального файлу
- підтримка нових CSS-фіч до їхнього впровадження в браузери (через плагіни)
5. Приклади
| Тип | Інструменти |
|---|---|
| Препроцесор | Sass, LESS, Stylus |
| Постпроцесор | PostCSS із плагінами (Autoprefixer, cssnano) |
Підсумок
Препроцесор - це про комфорт і зручність написання коду. Постпроцесор - про якість готового CSS у продакшені.
Їх часто використовують разом: спочатку SASS генерує CSS, потім PostCSS поліпшує його перед публікацією.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.