CSS змінні
Змінні стали нативним інструментом в CSS, тепер вони є не тільки в препроцесорів. В CSS препроцесор типу Sass змінні дуже популярні.
Чим краще підтримка змінних в браузерах (без Edge і IE), тим легше їх використовувати в коді.
Як оголошувати CSS змінні
Найкраще оголошувати CSS змінні в псевдоклас: root в шапці стилів. Псевдоклас: root відноситься до самого верхнього батькові в DOM, зазвичай це тег HTML. Один з універсальних селектор.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Псевдоклас: root виступає в ролі селектора. Мінлива починається з двох знаків тире, після чого слід ім'я змінної і значення. Далі в коді на створену змінну можна посилатися у всіх відповідних для цього випадків. приклад:
У цьому прикладі ми міняємо колір фону для всіх параграфів на значення, записане в змінної -primary-color. У цієї змінної, яка лежить в псевдоклас: root, вже записано значення red.
Як правильно використовувати CSS змінні
Якщо вам знадобиться змінити колір з червоного на синій, вам або доведеться використовувати по всьому коду змінну з неправильним іменем, або міняти змінну у всіх місцях.
Швидше за все, ви хотіли б уникнути обох проблем, так як вони вбивають ідею швидкого і легкого редагування коду.
Більш правильно створювати CSS змінні, як показано нижче, в два етапи:
Двохетапне створення змінних, як показано вище, дозволяє просто і ефективно редагувати код. Якщо вам знадобитися змінити відтінок червоного в усіх стилях, потрібно буде всього лише змінити змінну -red. Інакше вам довелося б міняти все значення вручну.
Також на рівні змінних таким способом можна міняти основний колір на сайті. Якщо потрібно поставити синій колір, вам потрібно зробити лише два кроки.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Спочатку потрібно оголосити змінну з синім кольором, потім прописати її в якості значення основного кольору. Нижче показаний приклад на основі попереднього.
Практичне застосування
У CSS змінних є багато прикладів практичного (і непрактично) застосування. Я розповім про практичні з моєї точки зору.
Керівництва по квітам і стилям
За допомогою змінних можна створювати керівництва за стилями і з легкістю вносити в них зміни. Найкращий спосіб. Нижче наведено практичний приклад керівництва за стилями з використанням кольорів.
У довгостроковій перспективі такий процес дозволяє швидко і просто редагувати код. Можна внести дрібні зміни в колір і не редагувати весь CSS.
Margin'и і padding'і
За допомогою змінних можна задавати margin'и і padding'і за замовчуванням. приклад:
Висота і ширина
Цікава тема, за допомогою CSS функції calc () можна проводити обчислення. Перед поясненням я приведу приклад:
Можна задати розміри для батьківського блоку і обчислювати розміри дочірніх елементів щодо батька. Спосіб відмінно працює, особливо для створення адаптивних елементів.
Інші способи застосування змінних в стилях
Змінні добре підходять для стилізації шрифтів, тіней (box-shadow), анімацій і т.д. Змінні можна використовувати будь-якими способами.
Примітка: демо нижче можна редагувати прямо на сторінці.
Демо з CSS змінними
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
