Чого можна досягнути з допомогою CSS змінних і неможливо зробити використовуючи препроцесори
Зараз дуже популярним є використання препроцесорів для CSS: Less, Saas, Stylus. Основною причиною широкого застосування цих інструментів є можливість роботи зі змінними. Проте, після компіляції в звичайний CSS, всі значення є статичними.
Основною перевагою роботи з нативними CSS змінними є те, що значення можуть бути змінені в процесі використання. На додаток до цього, вони обмежені областю, тож значення буде змінено тільки в підмножині дерева DOM.
Давайте розглянемо все це більш детально.
Теми сайту без CSS змінних
Давайте спробуємо реалізувати кольорові теми для сайту, щоб проілюструвати корисність CSS змінних. Наше завдання - змінити різні кольори, в залежності від класу елемента <body>. В CSS без змінних ви могли б зробити щось на кшталт:
.red-theme .primary-color {
color: #801515;
}
.red-theme .primary-color-bg {
background-color: #801515;
}
.red-theme .secondary-color {
color: #D46A6A;
}
.red-theme .secondary-color-bg {
background-color: #D46A6A;
}
.red-theme .tertiary-color {
color: #AA3939;
}
.red-theme .tertiary-color-bg {
background-color: #AA3939;
}
Це призводить до 6 окремих селекторів в результуючому CSS - і це тільки для однієї теми. На додаток до цього, вам буде потрібно розмістити класи по всій розмітці або додати явні селектори в стилі CSS теми, які не дуже зручно “обслуговувати”. Обидва способи не є ефективним рішенням проблеми.
Це значить:
<h1 class="tertiary-color">For Example</h1>
<button class="primary-color-bg">A button</button>
<a class="secondary-color">A link</a>
Або:
.red-theme .primary-color-bg,
.red-theme button {
background-color: #801515;
}
.red-theme .secondary-color,
.red-theme a {
color: #D46A6A;
}
.red-theme .tertiary-color,
.red-theme h1 {
color: #AA3939;
}
Теми сайту з використанням CSS змінних
Реалізація з допомогою змінних набагато ефективніше. В такому випадку, ви можете визначити колір змінної .red-theme і потім використовувати її безпосередньо для інших стилів. Це дозволить зберігати інформацію стилів окремо від вашої розмітки, разом з селекторами.
.red-theme {
--theme-primary: #801515;
--theme-secondary: #D46A6A;
--theme-tertiary: #AA3939;
}
button, a {
background-color: var(--theme-primary);
color: var(--theme-secondary);
}
h1 {
color: var(--theme-tertiary);
}
Це більш елегантне рішення проблеми. На додаток до цього, як згадувалося раніше, вони обмежені областю, тому нічого не заважає нам, використовуючи різні теми, скажімо, для панелі навігації.
<body class="red-theme">
<nav class="blue-theme">
<button>Blue button</button>
</nav>
<main>
<button>Red button</button>
</main>
</body>
Додаткові способи використання
Є купа додатків, де CSS змінні можуть розширити можливості препроцессорів. Інший приклад реалізації системи відстаней, подібної до Gmail. Вона дозволяє користувачеві вибрати варіант відображення інтерфейсу користувача.
.compact {
--option-padding: 0.1em 0.2em;
}
.cosy {
--option-padding: 0.3em 0.6em;
}
.comfortable {
--option-padding: 0.5em 1em;
}
.list-item {
padding: var(--option-padding);
}
Браузерна підтримка
На жаль, підтримка CSS змінних здійснються лише останньою версією Firefox та Firefox для Android.
331 8
GR: 4.458k
Коментарі: