Пошук уроків, статей та іншого контенту
Створюйте повторно використовувані значення кольорів і шрифтів за допомогою CSS-змінних та функції var().
CSS-змінні, або власні властивості CSS, дають змогу зберігати значення кольорів, шрифтів та інших стилів в одному місці й повторно використовувати їх у різних правилах.
Без змінних один і той самий колір доводиться дублювати:
.button {
background-color: #2563eb;
}
.link {
color: #2563eb;
}
.title {
border-color: #2563eb;
}Якщо основний колір зміниться, доведеться знаходити й редагувати всі такі значення. Із CSS-змінною достатньо змінити значення лише один раз.
:root {
--color-primary: #2563eb;
}
.button {
background-color: var(--color-primary);
}
.link {
color: var(--color-primary);
}Власна властивість починається з двох дефісів:
--назва-змінної: значення;Наприклад:
:root {
--color-primary: #2563eb;
--color-text: #172033;
--font-family-base: Arial, sans-serif;
--font-size-base: 1rem;
}Назви змінних чутливі до регістру:
:root {
--color-primary: #2563eb;
--Color-primary: #dc2626;
}--color-primary і --Color-primary — це дві різні змінні. Щоб уникати плутанини, використовуйте один стиль написання, наприклад kebab-case.
Змінні, оголошені в :root, доступні в усьому документі. Псевдоклас :root відповідає кореневому елементу HTML, тобто елементу html.
:root {
--color-primary: #2563eb;
--color-background: #f8fafc;
}Такі змінні зручно використовувати для основних значень дизайн-системи:
кольорів;
розмірів шрифту;
сімейств шрифтів;
товщини накреслення;
міжрядкового інтервалу.
Змінну можна оголосити для конкретного елемента або його піддерева:
.card {
--card-padding: 1.5rem;
padding: var(--card-padding);
}У цьому прикладі --card-padding доступна для .card і його дочірніх елементів, але не для інших елементів документа.
CSS-змінні наслідуються. Наприклад:
.card {
--card-title-color: #0f172a;
}
.card h2 {
color: var(--card-title-color);
}Заголовок може використати змінну, оголошену на батьківському елементі .card.
var()Щоб отримати значення змінної, використовуйте функцію var():
.element {
color: var(--color-text);
}Загальний синтаксис:
властивість: var(--назва-змінної);CSS-змінну можна використовувати в будь-якій властивості, яка приймає відповідний тип значення:
.button {
color: var(--color-button-text);
background-color: var(--color-primary);
border: 1px solid var(--color-primary);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
}Другий аргумент var() використовується як запасне значення, якщо змінна не визначена:
.element {
color: var(--color-text, #172033);
}Якщо --color-text існує, буде використано її значення. Інакше браузер використає #172033.
Запасне значення особливо корисне для локальних змінних:
.card {
color: var(--card-text-color, var(--color-text, #172033));
}У цьому прикладі браузер:
спочатку шукає --card-text-color;
якщо її немає — шукає --color-text;
якщо немає і її — використовує #172033.
Зручно зберігати окремі ролі кольорів, а не лише назви на кшталт --blue або --gray:
:root {
--color-primary: #2563eb;
--color-primary-dark: #1d4ed8;
--color-background: #f8fafc;
--color-surface: #ffffff;
--color-text: #172033;
--color-text-muted: #64748b;
--color-border: #cbd5e1;
--color-danger: #dc2626;
}Рольова назва пояснює, де використовується колір:
body {
background-color: var(--color-background);
color: var(--color-text);
}
.card {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
}
.muted-text {
color: var(--color-text-muted);
}Це спрощує зміну теми або оновлення візуального стилю. Наприклад, щоб змінити фон усіх карток, достатньо змінити --color-surface.
Окремо можна описати основні параметри тексту:
:root {
--font-family-base: Arial, sans-serif;
--font-family-heading: Georgia, serif;
--font-size-base: 1rem;
--font-size-small: 0.875rem;
--font-size-title: 2rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--line-height-base: 1.5;
--line-height-heading: 1.2;
}Потім ці значення використовуються в стилях:
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
h1,
h2,
h3 {
font-family: var(--font-family-heading);
line-height: var(--line-height-heading);
}
h1 {
font-size: var(--font-size-title);
font-weight: var(--font-weight-bold);
}Змінна повинна містити лише значення, яке очікує властивість. Наприклад:
:root {
--font-size-base: 1rem;
--font-weight-bold: 700;
}Не потрібно зберігати назву властивості всередині змінної:
/* Невдалий варіант */
:root {
--base-font: font-size: 1rem;
}Нижче наведено самодостатній приклад сторінки з CSS-змінними для кольорів і типографіки:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS-змінні</title>
<style>
:root {
--color-primary: #2563eb;
--color-primary-dark: #1d4ed8;
--color-background: #f1f5f9;
--color-surface: #ffffff;
--color-text: #172033;
--color-text-muted: #64748b;
--color-border: #cbd5e1;
--font-family-base: Arial, sans-serif;
--font-family-heading: Georgia, serif;
--font-size-base: 1rem;
--font-size-small: 0.875rem;
--font-size-title: 2rem;
--font-weight-regular: 400;
--font-weight-bold: 700;
--line-height-base: 1.5;
--line-height-heading: 1.2;
--space-small: 0.5rem;
--space-medium: 1rem;
--space-large: 1.5rem;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: var(--space-large);
background-color: var(--color-background);
color: var(--color-text);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.card {
max-width: 32rem;
margin: 0 auto;
padding: var(--space-large);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0.75rem;
}
.card__title {
margin: 0 0 var(--space-small);
color: var(--color-text);
font-family: var(--font-family-heading);
font-size: var(--font-size-title);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
}
.card__description {
margin: 0 0 var(--space-large);
color: var(--color-text-muted);
}
.button {
display: inline-block;
padding: var(--space-small) var(--space-medium);
border: 0;
border-radius: 0.375rem;
background-color: var(--color-primary);
color: var(--color-surface);
font: inherit;
font-weight: var(--font-weight-bold);
cursor: pointer;
}
.button:hover {
background-color: var(--color-primary-dark);
}
.card__note {
margin-top: var(--space-large);
color: var(--color-text-muted);
font-size: var(--font-size-small);
}
</style>
</head>
<body>
<article class="card">
<h1 class="card__title">CSS-змінні</h1>
<p class="card__description">
Кольори й параметри типографіки зберігаються в одному місці
та повторно використовуються в компонентах.
</p>
<button class="button" type="button">Докладніше</button>
<p class="card__note">
Змініть значення в :root, щоб оновити стилі всієї сторінки.
</p>
</article>
</body>
</html>У прикладі:
глобальні змінні оголошені в :root;
кольори мають назви за ролями;
параметри типографіки використовуються в body, заголовку та кнопці;
одна зміна --color-primary оновить фон кнопки та інші елементи, які використовують цей колір;
font: inherit дає кнопці успадкувати базові параметри шрифту, після чого окремо встановлюється жирність.
Локальна змінна може перевизначити глобальну:
:root {
--color-primary: #2563eb;
}
.button {
background-color: var(--color-primary);
}
.button--danger {
--color-primary: #dc2626;
}HTML:
<button class="button" type="button">Зберегти</button>
<button class="button button--danger" type="button">Видалити</button>Обидві кнопки використовують однакове правило background-color, але друга отримує інше значення --color-primary.
Такий підхід зручний для варіантів одного компонента:
.button {
--button-background: var(--color-primary);
--button-text: #ffffff;
background-color: var(--button-background);
color: var(--button-text);
}
.button--danger {
--button-background: var(--color-danger, #dc2626);
}CSS-змінні можна переглядати та тимчасово змінювати в інструментах розробника браузера:
відкрийте інструменти розробника;
виберіть елемент сторінки;
перегляньте правило :root або правило конкретного компонента;
змініть значення змінної;
перевірте, як змінилися всі пов’язані елементи.
Це дає змогу швидко перевіряти кольорову схему та параметри типографіки без редагування файлу.
Неправильно:
:root {
color-primary: #2563eb;
}Правильно:
:root {
--color-primary: #2563eb;
}var() без назви змінноїНеправильно:
.button {
color: var();
}Правильно:
.button {
color: var(--color-primary);
}Назва під час використання повинна точно збігатися з назвою під час оголошення:
:root {
--color-primary: #2563eb;
}
.button {
background-color: var(--color-prmary);
}У цьому прикладі є помилка в написанні primary. Якщо запасне значення не вказано, властивість може стати невалідною.
:root {
--main-color: 1rem;
}
.title {
color: var(--main-color);
}color не може використати значення 1rem, тому стиль не спрацює. Назва змінної має відповідати її призначенню, а значення — властивості, у якій воно використовується.
Не варто без потреби створювати багато змінних з однаковими значеннями:
:root {
--blue-for-button: #2563eb;
--blue-for-link: #2563eb;
--blue-for-border: #2563eb;
}Якщо це один і той самий колір у дизайн-системі, краще почати з однієї змінної:
:root {
--color-primary: #2563eb;
}Окремі змінні потрібні тоді, коли значення мають різні ролі або можуть змінюватися незалежно.
CSS-змінні оголошуються через синтаксис --назва: значення.
Глобальні змінні зазвичай розміщують у :root.
Для використання змінної застосовують var(--назва).
Другий аргумент var() задає запасне значення.
CSS-змінні успадковуються, тому локальні значення можна перевизначати для компонентів і їхніх варіантів.
Кольори краще називати за ролями: --color-primary, --color-background, --color-text.
Параметри типографіки можна зберігати в змінних для сімейства, розміру, товщини та міжрядкового інтервалу.
Зміна одного значення в :root може оновити всі пов’язані елементи сторінки.