Препроцесор — це інструмент, який розширює можливості CSS, додаючи додаткові функції та можливості. Це файл із кодом, який компілюється у CSS. Препроцесори пропонують різні функції, зокрема змінні, вкладеність, функції, міксіни тощо.

Деякі популярні мови препроцесорів для CSS — це Sass, Less та Stylus. Ці мови препроцесорів створені для підвищення ефективності CSS і полегшення роботи з ним, і використовуються багатьма розробниками для великих проєктів.

Між ними немає суттєвої різниці. Основна концепція однакова, тому всі переваги препроцесорів розглядатимемо на прикладі sass.

Переваги

• Структурування проєкту — Можливість писати код у різних файлах і папках, що робить структуру чистою та передбачуваною;
• Функціональність — Можливість писати код більш керовано та ефективно завдяки додатковим можливостям препроцесора;
• Сумісність — Синтаксис sass повністю сумісний з існуючими css правилами, що дозволяє включати готовий css-код у sass-файл, але не навпаки.

Недоліки

• Синтаксис — Необхідно витратити час на вивчення синтаксису та звикання до додаткової функціональності;
• Компіляція — Потрібно виконати ще один крок для перетворення sass у css.