Перейти до основного вмісту

Препроцесори

Крім вільного володіння базовими технологіями (HTML, CSS і JavaScript), розробник повинен вміти використовувати безліч допоміжних інструментів. Один з таких інструментів - це CSS-препроцесор - надбудова, що розширює CSS-синтаксис, полегшує написання, підтримку і рефакторинг коду. Препроцесори дозволяють використовувати конструкції, які прискорюють і спрощують написання коду.

Популярні препроцесори

Найпопулярніші препроцесори - це SASS, LESS і Stylus. Всі вони схожі і вирішують одне завдання, тому достатньо вибрати і використовувати один. Найпопулярніший препроцесор - SASS і його синтаксис SCSS.

✅ Переваги:

  • Сумісність - синтаксис препроцесора повністю сумісний з уже існуючими CSS-правилами. Готовий CSS-код можна вставити в SASS-файл, але не навпаки.
  • Багатий функціонал - велика кількість допоміжних конструкцій для спрощення основних завдань під час написання CSS-коду.
  • Структура проекту - препроцесор дозволяє писати стилі в окремих файлах, що підвищує якість структури проекту та пошук стилів окремих блоків.
  • Чистота коду - оскільки стилі пишуться в окремих файлах і застосовуються допоміжні конструкції для повторного використання коду, він стає чистішим.

❌ Недоліки:

  • Синтаксис - додаткові конструкції препроцесора - це новий синтаксис, який необхідно вивчити і звикнути використовувати.
  • Компіляція - крок підготовки коду препроцесора для браузера, тобто перетворення всіх синтаксичних конструкцій у звичайний CSS.

Синтаксис​

Спочатку препроцесор SASS мав однойменний синтаксис - SASS. Для опису вкладеності він використовує відступи (пробіли або таби), замість фігурних дужок, що знижує читабельність і підвищує ймовірність зробити помилку. Файли з цим синтаксисом мають розширення .sass, наприклад main.sass.

main.sass
/* ❌ Старий синтаксис SASS */
.box
  width: 400px
  height: 400px
  background-color: teal

  &:hover
      background-color: orange

Сьогодні використовується синтаксис SCSS (Sassy CSS), який є розширенням оригінального CSS-синтаксису. Це означає, що будь-яке допустиме значення в CSS-стилях буде працювати і в SCSS. Файли з цим синтаксисом мають розширення .scss, наприклад main.scss.

main.scss
/* ✅ Новий синтаксис SCSS */
.box {
  width: 400px;
  height: 400px;
  background-color: teal;

  &:hover {
    background-color: orange;
  }
}

Компіляція​

Популярні препроцесори

Браузер не розуміє синтаксису спеціальних конструкцій SASS, тому код препроцесора необхідно перетворити (скомпілювати) в CSS. Способів компіляції досить багато: різні консольні утиліти, збирачі і плагіни редактора.

Процес розробки зводиться до таких кроків.

  • Налаштовуємо інструмент для компіляції SASS-коду.
  • Пишемо код у файлах з розширенням .scss.
  • SASS автоматично компілюється в CSS і створюється CSS-файл.
  • Підключаємо скомпільований CSS-файл в index.html.
Корисно
  • Для тренування синтаксису можна використовувати інтерактивну платформу SassMeister.
  • У редакторі VSCode є розширення Live Sass Compiler, для компіляції SASS.
  • Можна скористатися зручним застосунком Scout-App.

Додаткові матеріали​