Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чим постпроцесор відрізняється від препроцесора (SASS/LESS)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Постпроцесор і препроцесор** вирішують різні завдання і працюють на різних етапах обробки CSS. **Ключове:** препроцесор генерує CSS на основі розширеного синтаксису до появи CSS, а постпроцесор змінює вже готовий CSS, не розширюючи мову.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняПостпроцесор і препроцесор вирішують різні завдання і працюють на різних етапах обробки 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 поліпшує його перед публікацією.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.