Що робить препроцесор під час компіляції?

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

#1. Розгортає вкладені селектори

Перетворює дерево вкладених правил на звичні каскадні записи, зрозумілі CSS.

#2. Підставляє змінні

Замість імен змінних підставляє їхні значення і позбувається самих декларацій.

#3. Розгортає міксини та функції

Вставляє в підсумковий CSS увесь код, описаний у міксинах або обчислений функціями.

#4. Обчислює операції

Рахує математичні вирази прямо в процесі компіляції (наприклад, 100% / 3 → 33.3333%).

#5. Збирає файли в один підсумковий CSS

Обробляє імпорти препроцесора і об'єднує модулі в єдиний результувальний файл.

---

У результаті цих кроків на виході виходить звичайний CSS-файл, без додаткових конструкцій. Він і підключається до браузера, а вихідний код на Sass, LESS або Stylus лишається зручним тільки для розробника.