Перейти до основного вмісту
Версія: Далі

CSS-змінні

Користувацькі властивості (CSS Custom Properties), також відомі як CSS-змінні - це контейнери для значень, визначені в CSS-документі з метою повторного використання. CSS-змінні спрощують використання і зміну значень, що повторюються у файлі стилів. Вони підтримуються браузером нативно і не вимагають жодних додаткових інструментів.

styles.css
.section {
  /* Інші стилі */
  border: 2px solid #3f51b5;
}

.section-title {
  /* Інші стилі */
  color: #3f51b5;
}

.section-title::before {
  /* Інші стилі */
  background-color: #3f51b5;
}

У наведеному прикладі значення #3f51b5 зустрічається тричі. Припустимо, що це головний колір бренду, який постійно використовується на різних сторінках сайту. Якщо зміниться колір бренду, нам потрібно буде всюди замінити це значення, а у великому проекті це можуть бути сотні місць. Найкраще, що ми можемо зробити - використовувати пошук і заміну.

Оголошення змінної​

На допомогу приходять CSS-змінні. Ім'я змінної чутливе до регістру та може містити латинські літери, цифри, підкреслення і тире. Створимо змінну --brand-color для зберігання кольору бренду (#3f51b5) і будемо її використовувати.

styles.css
:root {
  --brand-color: #3f51b5;
}

Глобальні змінні, що доступні в будь-якому іншому правилі, визначаються в селекторі :root - специфічнішому селекторі елемента <html>. Оголошення змінної починається з подвійного дефіса --, за яким стоїть її ім'я у довільній нотації. Наприклад, brand-color або brandColor - це валідні імена змінної, головне, щоб всі змінні в проекті були в однаковій нотації. Ім'я та значення розділяється двокрапкою, а в кінці ставиться крапка з комою.

Цікаво

Оголошення змінної - це створення нової CSS-властивості, що наслідується і тому доступна скрізь, оскільки будь-який елемент - це нащадок елемента <html>.

Використання змінної​

Для отримання доступу до значення змінної застосовується вбудована функція var(), якій першим аргументом передається ім'я змінної.

styles.css
:root {
  --brand-color: #3f51b5;
}

.section {
  /* Інші стилі */
  border: 2px solid var(--brand-color);
}

.section-title {
  /* Інші стилі */
  color: var(--brand-color);
}

.section-title::before {
  /* Інші стилі */
  background-color: var(--brand-color);
}

Коду стало не набагато більше, але він гнучкіший і читабельніший. Якщо необхідно змінити колір бренду, досить замінити значення змінної --brand-color і колір зміниться всюди, де вона використовується.

Корисно

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

Резервні значення​

Функція var(ім'я_змінної, фолбек) може приймати два значення. Другий аргумент - це фолбек - значення, яке буде використовуватися, якщо змінна, яка передана першим аргументом, не визначена.

styles.css
.section {
  border: 2px solid var(--brand-color, orange);
}

.section-title {
  color: var(--brand-color, black);
}

.section-title::before {
  background-color: var(--brand-color, tomato);
}
Корисно

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

Область видимості​

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

styles.css
.alert {
  --alert-text-color: black;
  --alert-accent-color: tomato;
}

.alert-text {
  color: var(--alert-text-color);
  border: 1px solid var(--alert-accent-color);
}

.alert-icon {
  background-color: var(--alert-accent-color);
}

Перевизначення значень​

Змінні можна перевизначати локально іншими значеннями. Для цього необхідно оголосити змінну з таким самим ім'ям, що і в предка, і задати їй необхідне значення.