Використання CSS змінних у розробці сайту

33

Від автора: на днях я зайшов на сайт caniuse.com і був приємно здивований, коли побачив, що змінні CSS тепер підтримується в більшості браузерів за винятком одного. Мене це дуже зацікавило. Вже зовсім скоро ми зможемо використовувати CSS змінні безпосередньо в наших стилях.

Не перший раз

Варто відзначити, що змінні в CSS це не щось нове: вже багато років нам доступний, так званий currentColor, який можна назвати першої змінної. Препроцессоры типу Sass також вужа давно підтримують змінні, а специфікація CSS (під назвою Користувальницькі властивості) написана на основі безлічі відкриттів у розробці, пов’язаних з усіма трьома інструментами.

Змінні в Sass і CSS сильно відрізняються. Вони пишуться по-різному, і хоча вони схожі, CSS змінні можуть те, що не можуть Sass змінні і навпаки.

Один з найпоширеніших прикладів використання змінних CSS – установка головних кольорів, які повторюються в стилях. З цього прикладу я і почну.

Живі кольори

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

універсальний селектор (*);

елемент body;

:root;

класи;

селектори елементів.

На практиці, CSS змінні можна оголошувати будь селекторі. Обмеження тільки по спадкуванню, що дуже важливо. Для оголошення змінної необхідно написати два знака тире перед її ім’ям. Ім’я змінної має бути без пробілів:

body {
—alert: #cb333b;
}

На відміну від інших властивостей CSS змінні чутливі до регістру: —alert не одно —Alert. Функція var() змінну можна викликати в стилях за її посиланню і відтворити значення для відповідних селекторів:

h3 { color: var(—alert); }

Код вище змінить колір заголовка h3 на значення посилання —alert.

Жити на краю

Посилання на змінні можна використовувати всередині значень з декількома компонентами:

::root {
—shadowcolor: rgba(0,0,0,0.3);
}
aside {
box-shaodow: 50px 50px 5px var(—shadowcolor);
}

Посилання на змінні не можна з’єднувати з одиницями вимірювання, а значення без одиниць виміру не приймаються. Іншими словами, не можна робити ось так:

.warning {
—timing: 1;
}
.warning:hover {
background: red;
transition: var(—timing)s;
}

А ось так можна:

.warning {
—timing: 1s;
}
.warning:hover {
background: red;
transition: var(—timing);
}

Посилання можна комбінувати з функцією calc:

div {
min-height: 100px;
—boldborder: 5px;
}
.subtle {
border: var(—boldborder) solid #666;
border-radius: calc(var(—boldborder) — 1px);
}

Посилання в класі subtle вказує border-radius в 4px.

Помінятися місцями

Визначати змінні і прописувати посилання на них можна не тільки в стилях. Також можна використовувати вставні і инлайновые посилання. Наприклад, у файлі CSS:

::root {
—fillet: 20px;
}

А в HTML файлі инлайновая посилання на змінну:

Перекрась у чорний

У Sass дуже часто створюють ключові змінні, які будуть часто використовуватися в стилях. Те ж саме можна зробити і з допомогою нативних CSS змінних:

::root {
—gutter: 1rem;
—keytext: rgba(0, 0, 0, 0.9);
—bordercolor: #333;
}

Що можна використовувати в будь-якому місці в стилях:

article {
margin: var(—gutter);
border: 1px solid var(—bordercolor);
}
article p {
color: var(—keytext);
}

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

CSS змінні можна використовувати всередині медіа запитів, велика перевага над Sass змінними.

Змінні сьогодні

На даний момент підтримка змінних відсутній тільки в Microsoft Edge / IE. Розробники вже дуже близько до того, щоб використовувати нативні змінні front-end коді. А поки що існує два способи.

1. Використовувати постпроцесор з підтримкою змінних CSS

Можна компілювати написаний CSS код з допомогою PostCSS в зв’язці з cssnext і на виході отримувати готові стилі. Тобто, можна написати так:

:root {
—keycolor: limegreen;
}
h1 {
color: var(—keycolor);
}

А на виході отримати:

h1 {
color: limegreen;
}

Метод передбачає, що будь-які зміни потрібно буде прогнати через cssnext. Є й інший спосіб.

2. Використовувати правило @supports

Для визначення, чи розуміє браузер CSS змінні, можна використовувати правило @supports:

@supports (—test: value) {
main {
—bcolor: rgba(0, 0, 0, 0.3);
background: —bgcolor;
}
}

Звичайно, тоді вам доведеться написати фолбэк для браузерів, які не розуміють CSS змінні:

main {
background: rgba(0, 0, 0, 0.3);
}

Висновок

В CSS змінних закладена величезна сила, їх можна використовувати в будь-якому місці в стилях, в тому числі і в медіа запитах. Леа Вероу у своїй презентації CSS на конференції показала парочку прикладів використання, а також розповіла про можливі підводні камені. Дуже раджу подивитися.