Коли веб-проект починає рости, його CSS зазвичай стає астрономічно-великим і брудним. Щоб вирішити цю проблему, були запроваджені CSS-змінні, що вже підтримуються популярними браузерами. Вони дозволяють розробникам зручніше працювати з часто використовуваними даними.
Змінні вже давно є в SASS та LESS, але це препроцесори і вони потребують компіляції перед використанням. Нативні змінні CSS працюють прямо в браузері!
Оголошення і використання змінних
Змінні використовують ту саму область видимості, що й інші оголошення в CSS. Зручніше всього, коли вони глобальні. Для цього потрібно оголошувати їх всередині псевдо-класу :root.
:root{
--awesome-blue: #2196F3;
}
Щоб отримати доступ до значення змінної ми використовуємо синтаксис var(...). Зауважте, що імена чутливі до регістру, тобто --foo != --FOO.
.some-element{
background-color: var(--awesome-blue);
}
Підтримка
Зараз змінні працюють у Firefox та Chrome останніх версій. Актуальну інформацію щодо підтримки можна отримати тут.
Нижче є кілька прикладів, що висвітлюють типові випадки використання CSS-змінних. Щоб побачити їх роботу не забудьте перевірити чи підтримує змінні ваш браузер.
Приклад №1 — кольори теми оформлення
Змінні дуже корисні коли вам потрібно використовувати ті самі властивості знову і знову. Зокрема, повторювання основних кольорів теми оформлення. Замість копі-пасту кольору кожного разу, ми можемо просто помістити його в змінну і брати його звідти.
Тепер, коли вашому замовнику неочікувано не сподобається ваша тема, ви можете змінити кольори лише в одному місці, але зміни вплинуть на всі сторінки сайту.
Приклад №2 — зрозумілі імена для властивостей
Другим зручним способом використання змінних є створення таких собі аліасів, коли ми не хочемо запам'ятовувати довгу властивість, наприклад для transform, box-shadow та font.
Помістивши значення властивості в змінну, ми можемо викликати його, використовуючи зрозумілі імена.
Приклад №3 — динамічна зміна значень змінних
Коли кастомна властивість оголошена декілька разів, то тоді до уваги береться найнижче оголошення в каскадному рівні стилів.
Приклад нижче показує як легко динамічно маніпулювати властивостями, при цьому лишаючи код чистим.
Ще декілька порад
Як ви бачите, змінні в CSS - досить простий інструмент для використання і не вимагає багато часу на його опанування. От ще декілька речей, які вам потрібно знати:
Функція var() має другий аргумент, який буде використовуватися, якщо зі змінною щось не так:
width: var(--custom-width, 20%);
Також можливо комбінувати змінні:
--base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);
А ще змінні працюють зі ще одною новою функцією в CSS — calc().
--container-width: 1000px;
max-width: calc(var(--container-width) / 2);
На цьому наша стаття закінчується. Тепер ви знаєте трошки більше про CSS, але пам'ятайте, що це все ж експериментальна фіча, яка все ще не підтримується належним чином.
Ще немає коментарів