Як використовувати CSS змінні

33

Від автора: привіт! Сьогодні ми з вами поговоримо про CSS змінних. Стаття складатиметься з двох секцій. У першій я опишу, як створювати CSS змінні, у другій – як їх використовувати.

У мене є дуже хороший приклад на CodePen, з яким ви можете погратися в кінці сторінки. Ви легко зможете поміняти там код, я намагався все позначати і коментувати.

CSS змінні

Змінні стали нативним інструментом в CSS, тепер вони є не тільки в препроцессорах. В CSS препроцессорах типу Sass змінні дуже популярні.

Чим краще підтримка змінних в браузерах (без Edge і IE), тим легше їх використовувати у коді.

Як оголошувати змінні CSS

Найкраще оголошувати CSS змінні в псевдоклассе :root в шапці стилів. Псевдоклас :root відноситься до верхнього батькові DOM, зазвичай це тег HTML. Один з універсальних селекторів.

Таке оголошення зберігає організацію коду і рятує від повторних оголошень змінних. Швидкий приклад, як створити CSS змінну.

:root {
—primary-color: red;
}

Псевдоклас :root виступає в ролі селектора. Змінна починається з двох знаків тире, після чого слідує ім’я змінної і значення. Далі в коді на створену змінну можна посилатися у всіх придатних для цього випадків. Приклад:

:root {
—primary-color: red;
}
p {
background-color: var(—primary-color);
}

У цьому прикладі ми змінюємо колір фону для всіх параграфів на значення, записане в змінній —primary-color. У цієї змінної, яка лежить в псевдоклассе :root, вже записано значення red.

Як правильно використовувати CSS змінні

Змінні можуть викликати безліч проблем в коді. Наприклад, візьмемо оголошення змінної нижче.

:root {
—red: #f44336;
}

Якщо вам знадобиться змінити колір з червоного на синій, вам або доведеться використовувати по всьому коду змінну з неправильним ім’ям, або міняти змінну у всіх місцях.

Швидше за все, ви хотіли б уникнути обох проблем, так як вони вбивають ідею швидкого і легкого редагування коду.

Більш правильно створювати CSS змінні, як показано нижче, у два етапи:

:root {
—red: #f44336;
—primary-color: var(—red);
}

Двоетапне створення змінних, як показано вище, дозволяє просто і ефективно редагувати код. Якщо вам знадобитися змінити відтінок червоного у всіх стилях, потрібно буде всього лише змінити змінну —red. Інакше вам довелося б міняти всі значення вручну.

Також на рівні змінних таким способом можна змінювати основний колір на сайті. Якщо потрібно поставити синій колір, вам потрібно зробити всього два кроки.

Спочатку потрібно оголосити змінну з синім кольором, потім прописати її в якості значення основного кольору. Нижче показаний приклад на основі попереднього.

:root {
—red: #f44336; /*Попередній основний колір*/
—blue: #00BAF0; /*Новий основний колір*/
—primary-color: var(—blue); /*Змінили —red на —blue*/
}

Практичне застосування

У CSS змінних є багато прикладів практичного (і непрактического) застосування. Я розповім про практичні з моєї точки зору.

Керівництва з кольорами і стилями

З допомогою змінних можна створювати керівництва за стилями та легко вносити в них зміни. Найкращий спосіб. Нижче наведено практичний приклад керівництва по стилях з використанням кольорів.

:root {
/*Кольори*/
—blue: #00BAF0;
—white: #fff;
—gray: #f4f4f4;
—orange: #FF9545
—green: #4c6520;
/*Керівництво по стилям*/
—primary-color: var(—blue);
—secondary-color: var(—white);
—accent-color: var(—gray);
—button-1: var(—orange);
—button-2: var(—green);
}

У довгостроковій перспективі такий процес дозволяє швидко і просто редагувати код. Можна внести дрібні зміни в колір і не редагувати весь CSS.

Також таке оголошення дозволяє семантично розмічати CSS, щоб потім не плутатися. Все дуже просто.

Магдіп’и і padding’і

З допомогою змінних можна задавати магдіп’и і padding’і за замовчуванням. Приклад:

:root {
—general-margin: 10px 0;
—general-margin-2: 20px 5px;
—general-padding: 10px;
}
/*БЛОКИ ДЛЯ КОНТЕНТУ*/
.box {
margin: var(—general-margin);
padding: var(—general-padding);
}
.box-2 {
padding: var(—general-padding);
}

Висота і ширина

Цікава тема, з допомогою CSS функції calc() можна проводити обчислення. Перед поясненням я наведу приклад:

:root {
—parent-height: 43%;
—parent-width: 40%;
}
.parent {
height: var(—parent-height);
width: var(—parent-width);
}
.child {
height: calc(var(—parent-height) — 100px);
width: calc(var(—parent-width) — 60px);
}

Можна задати розміри для батьківського блоку і обчислювати розміри дочірніх елементів щодо батьків. Спосіб відмінно працює, особливо для створення адаптивних елементів.

Інші способи застосування змінних в стилях

Змінні добре підходять для стилізації шрифтів, тіней (box-shadow), анімацій і т. д. Змінні можна використовувати будь-якими способами.

Просто не забувайте про семантику при оголошенні і добре продумувати їх призначення. Занадто багато змінних можуть засмічувати код. Приклад роздутого коду можете подивитися нижче.

Примітка: демо нижче можна редагувати прямо на сторінці.

Демо з CSS змінними