Модуль 33

Препроцесори: SCSS (огляд)

Ось готовий урок, створений спеціально за твоїм майстер-промптом. Пристебни ремені, ми починаємо! 🚀

🎨 Урок: Препроцесори: SCSS (Огляд)

1. 🔥 Вступ: Коли CSS стає нічним кошмаром

Привіт, друзі!

Уявіть собі ситуацію. Ви будуєте величезний хмарочос (це ваш вебсайт). У вас є 1000 кімнат (HTML-елементів), і в кожній з них стіни пофарбовані в специфічний відтінок синього: #007bff. Ви прописуєте цей код у CSS сотні разів.

І тут приходить замовник (або дизайнер) і каже: "Знаєш, цей синій занадто... сумний. Давай змінимо його на кораловий #ff7f50. Скрізь."

Що ви робите? 1. Відкриваєте файл на 5000 рядків коду. 2. Натискаєте CTRL+F. 3. Молитесь, щоб не замінити щось зайве. 4. Витрачаєте годину свого життя даремно.

Риторичне запитання: Хіба це схоже на інженерний підхід? Хіба ми, програмісти, не повинні бути лінивими в хорошому сенсі цього слова?

CSS — це чудова мова, але вона "пласка". Вона не вміє запам'ятовувати. Вона змушує вас повторюватись.

А тепер уявіть, якби CSS мав суперздібності. Якби ви могли сказати один раз: "Головний колір — це кораловий", і весь сайт автоматично оновився б.

Саме для цього нам потрібен SCSS. Це CSS на стероїдах. Це інструмент, який перетворює написання стилів з рутинного копіювання на справжнє програмування.

2. 🧠 Теоретична база (Що там «під капотом»?)

Давайте розберемося, що це таке, без нудних термінів.

SCSS (Sassy CSS) — це препроцесор.

Аналогія з кав'ярнею ☕️

Уявіть, що ваш браузер (Chrome, Safari) — це клієнт, який розуміє лише одну мову: "Дайте мені чорну каву" (звичайний CSS). Він не розуміє слів "Лате на мигдальному молоці з сиропом".

Але ви (розробник) хочете писати складні рецепти (SCSS). Тому нам потрібен Бариста (Компілятор).

  1. Ви пишете код у файлі .scss (зручний, логічний, крутий).
  2. Спеціальна програма (компілятор) бере цей файл.
  3. Вона перетворює ("компілює") його у звичайний .css.
  4. Браузер отримує звичайний CSS і щасливий.

❗️ Що треба запам'ятати залізобетонно: Браузери НЕ розуміють SCSS. Вони розуміють тільки CSS. Кожен файл SCSS мусить пройти через процес перетворення.

Синтаксис: SASS vs SCSS

Ви можете почути слово Sass. Це, по суті, те саме, але є нюанс: * Sass (старий стиль): пишеться без дужок {} і крапок з комою ;. Виглядає як Python. * SCSS (новий стиль): виглядає точно як CSS, але з новими фішками. Будь-який валідний CSS є валідним SCSS.

Ми будемо вчити саме SCSS, бо він популярніший і легший для старту.

3. 🧪 Приклади (Від простого до магії)

Приклад №1: Змінні (Variables)

Пам'ятаєте проблему з синім кольором? Вирішимо її.

Питання до вас: Як би ви назвали "коробку", в яку ми покладемо наш головний колір, щоб потім його використовувати?

Дивіться, як це просто:

// style.scss
$brand-color: #007bff; // Оголошуємо змінну через долар ($)
$font-stack: Helvetica, sans-serif;

body {
  font-family: $font-stack;
}

button {
  background-color: $brand-color; // Використовуємо змінну
  border: 1px solid $brand-color;
}

a {
  color: $brand-color;
}

Результат після компіляції (те, що бачить браузер):

/* style.css */
body {
  font-family: Helvetica, sans-serif;
}

button {
  background-color: #007bff;
  border: 1px solid #007bff;
}

a {
  color: #007bff;
}

Чому це круто? Змініть значення $brand-color в одному місці — і воно зміниться скрізь!

Приклад №2: Вкладеність (Nesting)

У звичайному CSS ми часто пишемо "паровозики": nav ul { ... }, nav ul li { ... }, nav ul li a { ... }. Це втомлює.

У SCSS ми пишемо структуру так, як вона виглядає в HTML.

SCSS:

nav {
  background: #333;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
    }

    a {
      color: white;
      text-decoration: none;

      // Символ & означає "батьківський елемент" (тут це "a")
      &:hover {
        color: yellow;
      }
    }
  }
}

Що ви очікуєте побачити у CSS? Компілятор сам "розклеїть" цю матрьошку і створить звичайні селектори: nav ul, nav ul li, nav a:hover тощо. Код стає читабельним і логічним!

Приклад №3: Міксини (Функції для стилів)

Уявіть, що вам постійно треба центрувати елементи за допомогою Flexbox. Це три рядки коду. А якщо таких блоків 20?

Ми створюємо Mixin (ніби власний сніпет коду).

// Створюємо міксин
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Використовуємо його
.header-content {
  height: 500px;
  @include center-flex; // Вставляємо сюди код
  background: pink;
}

.modal-window {
  @include center-flex;
  background: white;
}

Це економить час і робить код чистим. Виглядає як виклик функції у звичайному програмуванні, правда?

4. 🛠 Практична частина

Час забруднити руки кодом! (Ви можете спробувати це на codepen.io, вибравши в налаштуваннях CSS -> Preprocessor: SCSS).

Завдання 1: Змінні Створіть дві змінні: $primary-font (наприклад, Arial) і $accent-color (наприклад, червоний). Застосуйте шрифт до body, а колір — до заголовків h1.

Завдання 2: Рефакторинг (Вкладеність) У вас є такий CSS. Перепишіть його на SCSS, використовуючи вкладеність:

.card { border: 1px solid black; }
.card .card-title { font-weight: bold; }
.card .card-text { color: grey; }
.card:hover { border-color: blue; } // Підказка: використовуйте &

Завдання 3: Математика SCSS вміє рахувати! Спробуйте задати ширину сайдбару змінною $width: 300px, а ширину контенту розрахуйте прямо в коді як 100% - $width. Питання: Чи спрацює це, якщо не ставити пробіли навколо мінуса? (Спробуйте!)

Завдання 4: Міні-кейс "Темна тема" Створіть змінні $bg-color та $text-color. Придумайте значення для світлої теми. Напишіть стилі для body. Потім просто змініть значення змінних на темні (чорний фон, білий текст) і натисніть "Compile". Подивіться, як миттєво змінився настрій сайту.

Завдання 5: Знайди помилку Чому цей код не працює?

.button {
  color: $my-color;
}
$my-color: red;

(Підказка: Як комп'ютер читає файл? Згори вниз чи знизу вгору?)

5. 💡 Мислення як у розробника

Ви тепер знаєте синтаксис, але знати ноти — не означає бути композитором. Ось як думають профі:

  1. Принцип "Не гнізди занадто глибоко" (Inception Rule). Новачки люблять робити так: scss header { div { ul { li { a { ... } } } } } Не робіть так! Це створює монструозні селектори в CSS (header div ul li a), які важко перебивати і які сповільнюють браузер. Порада: Намагайтеся не заходити глибше 3 рівнів вкладеності.

  2. Модульність — це все. У реальному проєкті ви не пишете все в один файл. Ви робите папку scss і створюєте файли:

    • _variables.scss (тільки змінні)
    • _header.scss (хедер)
    • _footer.scss (футер) І потім збираєте їх в один головний файл командою @import. Це як складати LEGO.

  3. Змінні мають мати сенс. Погана назва: $red: #ff0000;. Хороша назва: $error-color: #ff0000;. Чому? Бо якщо ви захочете змінити колір помилки на помаранчевий, змінна $red, яка зберігає помаранчевий колір, виглядатиме ідіотськи. Називайте змінні за їхнім призначенням, а не виглядом.

6. 🧩 Підсумок

Отже, що ми маємо? * SCSS — це інструмент, який пише CSS за вас. * Змінні дозволяють керувати стилем всього сайту з одного місця. * Вкладеність робить код схожим на структуру HTML. * Браузеру потрібен компілятор, щоб зрозуміти вашу магію.

Ви тепер вмієте не просто "фарбувати сторінки", ви вмієте архітектурно мислити стилями. Ви перейшли від ручної праці до автоматизованої.

Що далі? У наступному уроці ми поговоримо про те, як розділяти код на окремі файли (Partials) і збирати їх докупи, щоб ваш проєкт виглядав як професійна система, а не як звалище коду.

А поки що — спробуйте переписати свій останній CSS-файл на SCSS. Відчуйте цю свободу!

Успіхів! Кодуйте із задоволенням! 💻🔥

← До списку уроків Наступний урок →