Коротка відповідь
juniorCSS‑препроцесор — це інструмент, що розширює синтаксис CSS: додає змінні, вкладені правила, міксини та функції. Я працював з Sass і Less; вони дозволяють організовувати стилі у модульну структуру, зменшують дублювання коду і полегшують підтримку великих проектів. Нові можливості включають автоматичне генерування префіксів, компіляцію в один файл і інтеграцію з системами збірки.
Повне пояснення
- Що це і навіщо. CSS‑препроцесор — розширення стандартного CSS, що додає програмні конструкції (змінні, вкладені правила, міксини). Це зменшує дублювання коду і полегшує підтримку великих стилів.
- Ключові принципи. Препроцесор компілює власний синтаксис у валідний CSS, підтримує імпорт файлів, змінні типу
$color: #333;, вкладені правилаnav { ul { li {} } }і міксини. - Як це працює. Під час збірки (наприклад, через webpack або Gulp) препроцесор читає файли
.scss/.less, обробляє конструкції і генерує звичайний CSS, який браузер розуміє. - Практика і реалізація. У проектах Next.js часто використовується Sass через
next.config.jsабо@zeit/next-sass. Код прикладу:
$primary: #3498db;
.button {
background: $primary;
&:hover { opacity: .8; }
}
- Тестування. Стилі можна перевіряти за допомогою Jest +
jest-styled-componentsабо Testing Library, порівнюючи рендеринг компоненту. - Оптимізація. Препроцесори дозволяють мінімізувати CSS, видаляти не використані правила (purge‑css) і генерувати критичний CSS.
- Accessibility. Змінні полегшують підтримку тем, а міксини допомагають створювати адаптивні медіа‑запити.
- Безпека. Препроцесор сам по собі не впливає на XSS, але правильне використання змінних і медіа‑запитів допомагає уникнути небажаних стилів.
- Типові помилки. Неправильне вкладення, неправильний синтаксис змінних або відсутність префіксів у старих браузерах.
- Cheatsheet. Sass:
$var,@mixin,@include; Less:@var,.mixin(). Follow‑up питання: як працює авто‑префіксинг у Sass, чи можна використовувати CSS Modules з препроцесорами?