CSS function var

Опис

Функція 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>. Це дозволяє легко змінювати колір тексту для всього сайту, змінивши значення змінної на одному місці.

автор: Bond

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

Синтаксис

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

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

<name>

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

автор: Bond

<declaration-value>

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

автор: Bond