CSS Перевизначення змінних
Заміна глобальних змінних локальними змінними
В попередньому розділі ми дізнались, що до глобальних змінних можна звертатись та використовувати їх в усьому документі, в той час як локальні змінні можна використовувати лише всередині селектора, в якому вони оголошені.
Погляньте на приклад з попереднього розділу:
Приклад
: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;
}
Спробуйте самі »
Іноді необхідно, щоб змінні змінювались лише у визначеному розділі сторінки.
Наприклад, нам потрібен інший синій колір для елементів button (кнопок). Потім ми можемо повторно оголосити змінну --blue всередині селектора button. Коли ми використовуємо var(--blue) всередині цього селектора, він буде використовувати оголошене тут значення локальної змінної --blue.
Ми бачимо, що локальна змінна --blue перевизначає глобальну змінну --blue для елементів button:
Приклад
: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 {
--blue: #0000ff;
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Спробуйте самі »
Додати нову локальну змінну
Якщо змінна має використовуватись лише в одному місці, ми також могли б оголосити нову локальну змінну, наприклад:
Приклад
: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 {
--button-blue: #0000ff;
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
Спробуйте самі »
Підтримка браузерами
Числа в таблиці вказують першу версію браузера, яка повністю підтримує функцію var().
| Функція | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Функція var()
| Властивість | Опис |
|---|---|
| var() | Вставляє значення CSS змінній |
