Урок 08 · 11 хв

Збірка і навіщо SCSS

Без кроку збірки в браузері порожньо. Vite/sass стискає в CSS. Не змішуй три препроцесори.

У цьому курсі SCSS — зручний вихідний код: вкладеність, $ , mixin, файли. У проді користувач завантажує CSS. Vite: import "./styles.scss". Помилка синтаксису — на збірці, а не «мовчки у вкладці CSS». Source map вмикає в dev: у DevTools бачиш рядок .scss.

Точка входу

Можна спитати про це правило«Один препроцесор на проєкт»

sass --watch input:output без бандлера — ок для статичної верстки.
Не комітай node_modules і кеш. Комітай вихідні .scss, а не 20 копій зібраного, якщо збірка в CI.
Читай вихід, коли селектор «не той»: вкладеність бреше в голові, CSS у вкладці чесний.

Можна спитати про цей пункт«Суть уроку»

Перевірка

Закріпи, поки не пішов далі

1. Користувач сайту отримує
2. Друкарська помилка в .scss частіше спливає
3. Навіщо не змішувати Sass і Less в одному репо?