CSS Змінні - Функція var()
CSS Змінні
Функція var() використовується для вставки значення CSS змінної.
CSS змінні мають доступ до DOM, що означає, що ви можете створювати змінні з локальною або глобальною областю видимості, змінювати змінні за допомогою JavaScript та змінювати змінні на основі медіазапитів.
Хороший спосіб використовувати CSS змінні - це коли справа доходить до кольорів вашого дизайну. Замість того, щоб копіювати і вставляти одні і ті ж кольори знову і знову, ви можете помістити їх в змінні.
Традиційний шлях
В наступному прикладі показано традиційний спосіб визначення деяких кольорів в таблиці стилів (шляхом визначення кольорів, що використовуються, для кожного конкретного елемента):
Приклад
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color: #1e90ff;
background-color: #fff;
padding: 15px;
}
button {
background-color: #fff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}
Спробуйте самі »
Синтаксис функції var()
Функція var() використовується для вставки значення CSS змінній.
Синтаксис функції var() наступний:
var(ім’я, значення)
| Значення | Опис |
|---|---|
| ім’я | Обов’язково. Ім’я змінній (має починатися з двох тире) |
| значення | Не обов’язково. Резервне значення (використовується, якщо змінна не знайдена) |
Примітка: Ім’я змінної має починатися з двох дефісів (-), і воно чутливе до регістру!
Як працює var()
Передусім: змінні CSS можуть мати глобальну або локальну область видимості.
Доступ до глобальних змінних можні отримати / використовувати в усьому документі, в той час, як локальні змінні можна використовувати лише всередині селектора, в якому він оголошений.
Щоб створити змінну з глобальною областю видимості, оголосіть її всередині селектора :root. Селектор :root відповідає кореневому елементу документа.
Щоб створити змінну з локальною областю видимості, оголосіть її всередині селектора, який буде її використовувати.
Наступний приклад аналогічний наведеному вище, але тут ми використовуємо функцію var().
Спочатку ми оголошуємо дві глобальні змінні (--blue та --white). Потім використовуємо функцію var(), щоб вставити значення змінних пізніше в таблицю стилів:
Приклад
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Спробуйте самі »
Переваги використання var():
- спрощує читання коду (більш зрозумілий)
- значно спрощує зміну значень кольору
Щоб змінити синьо-білий колір на більш м’який синій і білий, вам просто необхідно змінити значення двох змінних:
Приклад
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Спробуйте самі »
Підтримка браузерами
Числа в таблиці вказують першу версію браузера, яка повністю підтримує функцію var().
| Функція | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS функція var()
| Властивість | Опис |
|---|---|
| var() | Вставляє значення CSS змінної |
