SCSS: старт

Урок 01 · 10 хв

Вкладеність

SCSS — це CSS плюс вкладеність. На виході однаково звичайний CSS.

Пишеш .card { .title { } } — збірка розгорне в .card .title. Браузер SCSS не їсть: потрібен Vite, Sass CLI або аналог. Вкладеність глибше трьох рівнів — ти вже не знайдеш, який селектор вийшов. Це не «чим глибше, тим крутіше».

Картка
AI

Можна спитати про це правило«Не повторюй ім'я батька вкладеністю заради вкладеності»

  • Розширення файлу .scss. Старий .sass (відступами) краще не змішувати в одному проєкті.
  • Коментар // у вихідному коді в CSS не потрапить. /* */ може потрапити.
  • Поки немає збірки — це просто текст. Помилка «invalid property» у браузері = файл не скомпілювали.
AI

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

Перевірка

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

  1. 1. Браузер виконує .scss сам?

  2. 2. Чому глибока вкладеність шкідлива?

  3. 3. Звичайний синтаксис із дужками — це