CSS var() — значення змінної CSS

Опис

Функція var() в CSS дозволяє використовувати значення змінних CSS (custom properties) у ваших CSS оголошеннях. Вона приймає два параметри: ім'я змінної та необов'язкове значення за замовчуванням. Під час використання var(), браузер шукає значення змінної CSS за заданим ім'ям. Якщо значення змінної не знайдено, буде використано значення за замовчуванням (якщо воно вказано). Якщо значення змінної знайдено, воно буде використано як значення властивості.

Наприклад, якщо ви використовуєте змінну --margin, ви можете використовувати її значення, наприклад, var(--margin), для встановлення відступів. Значення змінної можуть бути визначені в межах властивостей CSS, CSS-файлів або inline-стилів, надаючи вам гнучкість у зміні стилів для різних елементів або сторінок.

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

:root {
  --text-color: #333;
}

p {
  color: var(--text-color);
}

У даному прикладі, значення --text-color визначено в кореневому елементі :root, а потім використано за допомогою функції var() для встановлення кольору тексту в елементі <p>. Це дозволяє легко змінювати колір тексту для всього сайту, змінивши значення змінної на одному місці.

правити

Загальний опис

правити

Порада

Перед використанням функції var(), переконайтеся, що ви визначили відповідні змінні CSS.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

var(<name>, <declaration-value>?);

Функція var може отримувати 2 значень:

<name>

Ім'я змінної CSS.

автор: Bond

правити

<declaration-value>

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	49	31	9.1	36	15	—

Підтримка: мобільні переглядачі

Переглядач
	50	49	31	9.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Зміна кольору при наведенні</h2>
  <p>Цей приклад демонструє зміну кольору елемента при наведенні курсору.</p>
</div>

<div id="result">
  <div class="box">Елемент</div>
</div>

:root {
  --main-color: #ff0000; /* Задаємо змінну з колором */
}

.box {
  width: 200px;
  height: 200px;
  background-color: var(--main-color); /* Використовуємо змінну */
  transition: background-color 0.3s ease;
}

.box:hover {
  --main-color: #00ff00; /* Змінюємо значення змінної при наведенні */
}

<div id="description">
  <h2>Використання змінних для кольорів</h2>
  <p>Цей приклад показує використання змінних для визначення фонового кольору елементів.</p>
</div>

<div id="result">
  <div class="box">Елемент 1</div>
  <div class="box colored">Елемент 2</div>
</div>

:root {
  --main-color: #ff0000; /* Задаємо змінну з колором */
}

#result {
  display: flex;
  justify-content: space-around;
}

.box {
  width: 200px;
  height: 200px;
  background-color: var(--main-color); /* Використовуємо змінну */
}

.colored {
  --main-color: #00ff00; /* Змінюємо значення змінної для другого елемента */
}

<div class="card">
    <b>Звичайна картка</b> — бере --accent із :root.
</div>

<div class="card warn">
    <b>Попередження</b> — перевизначено --accent і --accent-bg на самій картці.
</div>

<div class="note">
    Батьківський колір тексту тут червоний.
    <span class="miss">А цей рядок просить color: var(--nope) — і стає червоним,
    бо оголошення не ігнорується, а успадковується.</span>
</div>

:root {
    --accent: #2f6f9f;
}

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 24px;
}

.card {
    border-left: 6px solid var(--accent);
    background: var(--accent-bg, #f2f6f9);
    padding: 14px 18px;
    margin-bottom: 14px;
}

.card b {
    color: var(--accent);
}

.warn {
    --accent: #b0561f;
    --accent-bg: #fdf3ec;
}

.note {
    color: #b03030;
    padding: 14px 18px;
    border: 1px dashed #cfd4d9;
}

.miss {
    color: var(--nope);
}