Екстрактор змінних кольорів CSS
Знайдіть усі кольори у своєму CSS і перетворіть їх на переиспользуемі користувацькі властивості.
Екстрактор змінних кольорів CSS
Вставте таблицю стилів, і цей інструмент сканує кожне оголошення на предмет значень кольорів, записаних як hex, rgb()/rgba() або hsl()/hsla(), а потім переписує правила, щоб вони посилалися на користувацькі властивості замість повторення одного й того ж значення скрізь. Він створений для очищення таблиці стилів, яка росла органічно — редизайн, злиття бібліотеки компонентів або CSS, витягнутий з інструменту дизайну — коли один і той же синій виявляється написаним дюжину трохи відрізняються способів.
Опція найменування контролює, як називається кожна змінна: за порядком першої появи (--color-1, --color-2…), за приблизним відтінком і світлістю (--color-dark-blue, --color-light-gray) або за властивістю, на якій вона вперше з'явилася (--color-background, --color-border). Включіть функцію «об'єднати однакові кольори, написані по-різному», щоб об'єднати #ff0000, rgb(255, 0, 0) та hsl(0, 100%, 50%) в одну змінну, навіть якщо вихідний текст відрізняється; однакові значення завжди об'єднуються незалежно. Повзунок подібності йде далі й об'єднує відтінки, які близькі, але не ідентичні — корисно, коли палітра накопила схожі сірі або сині кольори, які ніхто не збирався створювати. Виберіть, де знаходиться створений блок під :root чи користувацькому селектору, виберіть нотацію, у якій друкуються змінні, або перейдіть на простий список кольорів та лічильників появ, коли вам просто потрібен аудит, а не переписування.
Сканер шукає лише всередину фактичних значень оголошень, тому він ніколи помилково не приймає селектор ID типу #abcabc за колір і залишає коментарі, цитовані рядки та вміст url() повністю недоторканими. Обидва закінчення рядків Windows та Unix працюють, і інструмент не обманюється вкладеними функціями, такими як колір всередину списку градієнтів.
Все працює локально у вашому браузері — ваша таблиця стилів ніколи не завантажується нікуди, тому безпечно вставляти код із приватного проекту. Скопіюйте результат, завантажте його як файл .txt або відправте вивід назад на вхід, щоб уточнити його іншим проходом.