Назва CSS змінні говорить сама за себе. Як і змінні в препроцесорів, в них зберігаються певні значення, які необхідно буде повторно використовувати.
CSS змінні працюють за принципом звичайних властивостей. Змінні успадковуються, однак ви не зможете переписати значення, задавши змінної значення initial на самому початку.
Змінні починаються з -, а викликаються в якості значення за допомогою конструкції var (-myvar). Уявіть, що це префіксних властивість, але з порожнім префіксом (як -webkit- тільки без слова webkit). Префікс був обраний спеціально, щоб ви могли без конфліктів використовувати змінні Sass / Less.
CSS змінні задаються, як і інші властивості. Їх навіть можна прописати всередині HTML атрибута style, що відкриває нам можливість темізаціі. CSS змінні чутливі до регістру і не можуть бути порожніми.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Якщо у змінної задано неправильне значення для того властивості, на яке вона застосовується, буде скомпільована помилка «Invalid at computed-value time» та встановлено значення за замовчуванням initial.
Можна вказати фолбек на той випадок, якщо змінна не задана. Як фолбека можуть виступати інші змінні, у яких також можуть бути свої фолбекі.
В CSS відсутня конкатенація (крім властивості content), тому і CSS змінні не піддаються конкатенації. Тобто, наприклад, не можна комбінувати змінні з числами і змінні з одиницями вимірювання.
Адаптивний дизайн, анімація і Темізація
медіа запити
CSS змінні можна використовувати в медіа запитах. Дуже корисна штука: ви все один раз задаєте правило і можете переписувати значення змінної всередині медіа запиту.
Keyframes анімація і плавні переходи
Так як не можна точно визначити, який тип даних буде зберігатися в CSS змінної, то на даний момент вони не піддаються анімації. Браузер просто не знатиме, що робити з анімацією.
Якщо спробувати анімувати змінну всередині keyframes анімації, то елемент буде просто перестрибувати з одного значення на інше.
Проте, анімація може спрацювати для певних властивостей, якщо змінювати значення змінної властивості, до якого застосовано властивість transition:
За допомогою зміни публічної змінної -color ми можемо генерувати кнопку будь-якого кольору. У нашому випадку кнопка буде мати червоний текст, рамку і фон при наведенні.
JS можна використовувати для отримання, установки і зміни CSS змінних - дуже потужний інструмент.
Наступний приклад (взятий зі слайдів) задає змінну через JS по руху миші. Мінлива використовується в CSS для створення радіального градієнта, який рухається за курсором миші.
Підтримка в браузерах
Підтримка у CSS змінних, можливо, краще, ніж ви думаєте. Однак вона все ще низька. За даними сайту caniuse CSS змінні підтримуються у всіх основних браузерах, крім IE11 / Edge.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
