Що таке CSS змінні (custom properties)?

Вступ

CSS змінні, відомі як custom properties, є потужним інструментом у роботі з каскадними таблицями стилів. Вони дозволяють розподіляти та керувати значеннями властивостей стилів у зручний та ефективний спосіб. У цій статті ми розглянемо, що таке CSS змінні, як вони працюють та як їх використовувати для полегшення розробки веб-сайтів, а також як за допомогою JavaScript можна змінювати тему сайту.

Основні концепції CSS змінних

1. Визначення змінних

CSS змінні визначаються за допомогою властивостей, які починаються з подвійного дефісу --. Наприклад:

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

Тут --main-color та --font-size є змінними, які містять значення головного кольору та розміру шрифту.

2. Використання змінних

Змінні можна використовувати у будь-якому місці таблиці стилів, вказавши їхні значення через функцію var():

body {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

Це робить код більш модульним та зручним для зміни значень на пізніших етапах розробки.

Переваги використання CSS змінних

1. Легше управління стилями

Змінні дозволяють швидко змінювати значення стилів на всьому сайті, не змінюючи кожен окремий елемент вручну.

2. Можливість створення тем

Змінні дають можливість створювати теми для веб-сайту, дозволяючи легко змінювати колірну палітру та інші стилі.

3. Зменшення дублювання коду

Використання змінних зменшує дублювання коду, оскільки одне значення може використовуватися на всій сторінці.

Використання fallback у функції var()

Функція var() може приймати другий параметр, який визначає значення за замовчуванням, якщо змінна не визначена:

body {
  background-color: var(--main-color, #3498db);
  color: var(--font-color, #333);
}

У цьому прикладі, якщо --main-color не визначено, за замовчуванням використовуватиметься #3498db.

Зміна теми за допомогою JavaScript

Додавання можливості зміни теми за допомогою JavaScript робить веб-сайт більш інтерактивним та персоналізованим. Для цього використовуються функції для динамічного змінення значень CSS змінних.

1. Визначення JavaScript функції

function changeTheme(theme) {
  document.documentElement.style.setProperty('--main-color', theme === 'light' ? '#3498db' : '#2c3e50');
  document.documentElement.style.setProperty('--font-color', theme === 'light' ? '#333' : '#fff');
}

У цьому прикладі функція changeTheme приймає параметр theme, який може бути 'light' або 'dark', і змінює значення змінних --main-color та --font-color відповідно.

2. Виклик функції при зміні теми

// Приклад виклику функції при зміні теми на 'light'
changeTheme('light');

// Приклад виклику функції при зміні теми на 'dark'
changeTheme('dark');

Цей код можна викликати при події кліку на кнопці або іншому елементі, що ініціює зміну теми.

Приклад використання

Давайте розглянемо приклад використання CSS змінних у практиці.

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

body {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

h1 {
  color: var(--main-color);
}

У цьому прикладі --main-color та --font-size визначаються на рівні кореня (:root) і використовуються для визначення кольору тла та розміру шрифту.

Висновок

CSS змінні та їх комбінація з JavaScript відкривають нові можливості для створення динамічних та легко налаштовуваних інтерфейсів. Знання роботи зі змінними не лише полегшує управління стилями, але і дозволяє створювати сайти, які легко адаптуються до потреб користувачів. Впровадження зміни теми за допомогою JavaScript робить веб-сайти більш інтерактивними та привабливими.