Від автора: змінні – одна з головних причин, по якій взагалі існують CSS препроцессоры. Дуже зручна можливість встановити змінну для таких речей, як колір, і використовувати її потім в коді. Так ваш код буде структурований, в ньому не буде повторень, і його можна буде легко змінити. Також ви можете скористатися нативними CSS змінними (користувальницькі властивості). Але між ними є істотні розходження, про які необхідно знати.
Простий приклад використання змінних в препроцессорах:
$brandColor: #F06D06;
.main-header {
color: $brandColor;
}
.main-footer {
background-color: $brandColor;
}
Це був SCSS варіант Sass. Концепцію змінних пропонують все препроцессоры: Stylus, Less, PostCSS і т. д. Код вище нічого не робить. Браузер не зрозуміє таке оголошення і викине його. Щоб працювати з препроцессорами, їх код необхідно компілювати в CSS. Код вище компілюється в:
.main-header {
color: #F06D06;
}
.main-footer {
background-color: #F06D06;
}
Тепер все правильно. Змінні є частиною мови препроцесора, а не CSS. Після компіляції коду змінні йдуть. Зовсім недавно в CSS стали підтримуватися CSS змінні або користувальницькі властивості. Ви можете працювати зі змінними безпосередньо в CSS. Не потрібно ніякої компіляції.
Простий приклад використання користувацьких властивостей CSS:
:root {
–main-color: #F06D06;
}
.main-header {
color: var(–main-color);
}
.main-footer {
background-color: var(–main-color);
}
Ці два демо виконують одне і те ж. Ми задали колір один раз і використовували його двічі. Так в яких випадках які змінні використовувати?
Навіщо використовувати користувальницькі властивості CSS?
Їх можна використовувати без препроцесора.
Вони розподіляються. Всередині селектора можна оголосити змінну, щоб вона встановила або перезаписала поточне значення.
Коли значення змінюються (наприклад, медіа запити або інший стан), браузер все перемалюють, як треба.
До них можна звертатися і маніпулювати ними через JS.
Простий приклад каскадування:
:root {
–color: red;
}
body {
–color: orange;
}
h2 {
color: var(–color);
}
Всі теги h2 будуть мати помаранчевий колір, так як вони є дочірніми елементами тега body, у якого специфічність вище. Змінні навіть можна перезадавать в медіа запитах, а нові значення розподіляються на всю розмітку. З змінними в препроцессорах так не вийде. Подивіться цей приклад. Медіа запит змінює змінні, які використовуються для простої сітки:
Роб Додсон у своїй статті «CSS змінні: чому на них варто звернути увагу» виступає за них. «Змінні препроцесорів страждають від одного головного недоліку. Вони статичні, і їх не можна змінювати нальоту. Можливість змінювати змінні нальоту не тільки відкриває двері до динамічної темізаціі, але і надає великі наслідки на адаптивний дизайн і можливість створення полифилов для майбутніх CSS властивостей.»
Він написав демо, в якому через JS змінюються стилі. Стилі змінюються не безпосередньо, JS просто змінює значення декількох CSS змінних нальоту:
Уес Бос написав своє демо:
Я багато чого не розповів про власні властивості CSS. Можна задавати фолбэки. Можна використовувати функцію calc(). З змінними можна робити багато чого цікавого, дивіться розділ домашньої роботи нижче!
Навіщо використовувати змінні в препроцессорах?
Основна причина: відсутність спадкування підтримки в браузерах. Вони компілюються у звичайний CSS код.
Друга причина: значення можна вирізати одиниці вимірювання.
Їх можна використовувати разом
Існують досить вагомі причини, щоб використовувати змінні обох типів. Можна з допомогою CSS препроцесора виводити власні властивості. Іван Іванов створив демо, яке дозволяє писати власні властивості CSS і через Sass виводити код з фолбэками:
Я схильний думати, що коли ми зможемо використовувати користувальницькі властивості CSS, не думаючи про підтримку в браузерах, то ми будемо використовувати їх скрізь. Препроцессоры можна використовувати для чогось ще, але обробка змінних в нативному CSS виглядає настільки здорово, що, може бути, краще використовувати тільки рідні змінні.
Підтримка користувацьких властивостей CSS в браузерах
Дані про підтримку взято з сайту Caniuse, який також вказує на те, що ці властивості знаходяться в статусі W3C Candidate Recommendation.
Домашня робота
1) Подивіться ролик CSS Variables: var(—subtitle); від Вероу
Вона багато розповідає про практичне застосування змінних, а також про парочку трюків. Наприклад, як контролювати змінні під час каскадування, а також про деякі підводні камені.
2) Подивіться виступ Девіда Куршида «реактивна анімація з допомогою CSS»
Девід розповідає про те, як зв’язок DOM подій з змінними CSS може сильно вплинути на інтерфейс, не сильно збільшуючи код. Подивіться слайди (з 26-го), щоб зрозуміти, наскільки це красиво.
3) Прочитайте статтю Гаррі Робертса «прагматична, практична і прогресивна темізація з допомогою користувацьких властивостей»
У цій статті пояснюється, наскільки користувачеві простіше налаштовувати тему сайту через CSS змінні.
4) Прочитайте статтю Романа Комарова «умови використання CSS змінних»
Про це досить часто говорять, але в CSS немає логічних умов (тобто @if (true) { }). Ми імітуємо їх іноді з допомогою :checked, але все залежить від DOM. Роман показує, як за допомогою значень змінної 0 і 1 і функції calc() імітувати Булеву логіку.
