Привіт друзі, на зв'язку Шевченко Вячеслав, і сьогодні у мене не великий, але цікавий пост. Ви коли небудь стикалися з проблемою розростання проекту, і організацією css коду? Думаю відповідь однозначно ТАК, якщо НІ, то у вас все попереду.
Коли проект починає рости, його CSS зазвичай стає громіздким, і важко підтримуваним. Щоб вирішити цю проблему, розробники CSS ввели змінні, вони вже підтримуються популярними браузерами. Це дає можливість легко працювати з повтореннями стилів.
Знаючі й досвідчені верстальники, можуть заперечити і сказати «Змінні вже давно в SASS і LESS !!». Так, я не сперечаюся, але це препроцесори і вони потребують компіляції перед використанням, а нативні змінні CSS працюють прямо в браузері! Хіба це не круто?
Змінні в файлі використовують ту ж область видимості, що і інші правила в CSS. Звичайно найзручніше, коли вони глобальні. Для цього потрібно оголошувати їх усередині псевдо-класу: root.
Трохи про підтримку
Зараз змінні працюють в Firefox і Chrome останньої версії. Актуальну інформацію щодо підтримки можна отримати тут.
Нижче я приведу декілька прикладів, які добре продемонструють типові випадки використання CSS-змінних. Якщо у вас не працюють приклади, переконайтеся що у вас браузер останніх версій.
Кольори теми оформлення
Змінні дуже корисні коли вам потрібно використовувати властивості неодноразово. Тут гарним прикладом буде колірна схема оформлення. Замість того щоб копіювати колір від правила до правила, ми можемо просто помістити його в змінну і брати його звідти.
І коли з якихось причин потрібно буде змінити колір теми, або створити новий скін, ви можете змінити колір тільки в одному місці, але зміни вплинуть на всі сторінки сайту.
Зрозумілі імена для властивостей
Другим зручним способом використання змінних є створення деяких пресетів, коли ми не хочемо запам'ятовувати довге значення властивості, наприклад для transform. box-shadow і font.
Помістивши значення властивості в змінну, ми можемо викликати його, використовуючи зрозумілі імена.
Динамічна зміна значень змінних
Приклад нижче показує як легко динамічно маніпулювати властивостями. при цьому залишаючи код чистим.
Ще кілька порад
Як ви бачите, змінні в CSS - досить простий інструмент для використання і не вимагає багато часу на його освоєння. І ще пару речей, які вам потрібно знати:
Функція var () приймає два аргументи, другий буде використовуватися, якщо зі змінною щось не так: