Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

01.10.2023

Змінні CSS

Під час розробки плагіну для Obsidian дізнався про таку технологію, як змінні CSS. Вона тільки відносно нова, бо доступна в усіх браузерах з 2018 року. Варто про них знати, бо це багато спрощує.

Змінна оголошує значення в контексті каскаду стилів та успадковується схоже до звичайних властивостей CSS. Стилі, які знаходяться глибше за визначення, можуть цю змінну використати. Таким чином каскадність стилів розширюється; тепер в наших компонентах ми можемо не просто спиратись на атрибути, які визначені вище (наприклад, колір шрифту), а й додавати власну логіку (наприклад, зробити рамку такого ж кольору, як шрифт, а скоріше, узагальненого кольору на кшталт var(--color-fg).)

Коли я вчив CSS, то змінних там ще не було. Зате змінні були в Sass. Між ними та змінними CSS є суттєва різниця: в Sass змінні мають синтаксичний контекст, тобто вони привʼязані не до таблиці стилів, а до початкового коду Sass. Так що змінні CSS це не просто заміна змінним Sass, а інший підхід, що має кращу синергію зі семантикою каскадних таблиць стилів.

Та окрема перевага — те, що змінні CSS залишаються в кінцевому коді. Це дуже зручно для розробки всіляких доповнень, оскільки стилі доповнення можуть легко використати базові стилі, якщо ті визначені через змінні. Так, в Obsidian тема оголошує змінними всі свої параметри. Якщо я хочу підсвітити термінову задачу червоним — мені не потрібно вигадувати колір, який буде сумісний з темою користувача — можна просто взяти --color-red або, можливо, --text-warning. Шкода що не можу знайти другого прикладу такої системи.