CSS змінні (користувацькі властивості)

CSS Змінні (також відомі як Користувацькі Властивості) — це спосіб зберігати значення, які можуть бути повторно використані в CSS коді. Вони дозволяють створювати більш гнучкі та зручні для обслуговування стилі.

Що таке CSS Змінні?

CSS змінні — це користувацькі пропси, які можна визначити один раз і використовувати кілька разів. Вони працюють за принципом успадкування і можуть бути переозначені в будь-якому елементі.

Синтаксис

css

/* Визначення змінної */
:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 20px;
}

/* Використання змінної */
.button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

Переваги CSS Змінних

Централізоване управління: Усі значення зберігаються в одному місці (зазвичай в :root), що спрощує зміну тем або стилів.
Динамічні зміни: Змінні можуть бути змінені за допомогою JavaScript, що дозволяє створювати інтерактивні теми.
Успадкування: Змінні успадковуються від батьківських елементів, що дозволяє створювати контекстні стилі.
Резервні значення: Ви можете вказати резервне значення, якщо змінна не визначена.

Приклад з резервним значенням

css

.button {
  background-color: var(--primary-color, #3498db);
  /* Якщо --primary-color не визначено, використовується #3498db */
}

Область видимості Змінних

CSS змінні мають область видимості, що базується на каскаді:

css

/* Глобальні змінні */
:root {
  --main-color: blue;
}

/* Змінні для конкретного компонент */
.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

/* Змінні можуть бути переозначені */
.card.dark {
  --main-color: darkblue;
  background-color: var(--main-color);
}

Робота з CSS Змінними в JavaScript

CSS змінні можуть бути змінені динамічно за допомогою JavaScript:

javascript

// Отримання значення змінної
const root = document.documentElement;
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');

// Встановлення значення змінної
root.style.setProperty('--primary-color', '#ff0000');

// Приклад: зміна теми
function toggleTheme() {
  const root = document.documentElement;
  const currentTheme = root.style.getPropertyValue('--theme');
  
  if (currentTheme === 'dark') {
    root.style.setProperty('--bg-color', '#ffffff');
    root.style.setProperty('--text-color', '#000000');
    root.style.setProperty('--theme', 'light');
  } else {
    root.style.setProperty('--bg-color', '#1a1a1a');
    root.style.setProperty('--text-color', '#ffffff');
    root.style.setProperty('--theme', 'dark');
  }
}

Практичний Приклад: Теми Темряви/Світла

css

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --primary-color: #3498db;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
  --primary-color: #5dade2;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

html

<button onclick="toggleTheme()">Змінити тему</button>

javascript

function toggleTheme() {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-theme');
  html.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
}

Використання calc() з Змінними

CSS змінні можуть бути об'єднані з функцією calc():

css

:root {
  --base-size: 16px;
  --spacing: 20px;
}

.container {
  font-size: var(--base-size);
  padding: calc(var(--spacing) * 2);
  margin: calc(var(--spacing) / 2);
}

Обмеження

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

Порада:

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань