Разкрасяване на CSS – форматирайте CSS, LESS и SCSS онлайн
Разкрасяването на CSS използва Prettier – същия двигател за форматиране, използван от VS Code – за да превърне разбъркан или минифициран CSS в четим, последователно форматиран код. То поддържа синтаксиси CSS, LESS и SCSS, с настройки за отстъпване с 2 интервала, 4 интервала или табулация и конфигурируема ширина на реда. Поставете входа си, изберете опциите за форматиране и копирайте резултата; обработката остава във вашия браузър без качване.
Разкрасяването на CSS форматира CSS, LESS и SCSS с Prettier – същия двигател за форматиране, използван от VS Code. То превръща разбъркан или минифициран код на стилов лист в по-четим вид, което прави резултата по-лесен за инспектиране, преглед и споделяне. Поставете кода си в браузъра, изберете опциите за форматиране и копирайте изхода, когато е готов.
Форматърът поддържа отстъпване с 2 интервала, 4 интервала или табулация, както и конфигурируема ширина на реда. Тези настройки контролират как изглежда отстъпването и колко дълги могат да бъдат форматираните редове. Инструментът се фокусира върху форматирането на входа; той не описва конверсия от CSS в LESS или SCSS или обратно.
CSS е стандартният език за стилове, докато LESS и SCSS са CSS-свързани синтаксиси за стилове с допълнителни авторски конвенции. Разкрасяването на CSS е полезно, когато искате кодът в един от тези поддържани синтаксиси да е по-последователен и четим, без ръчно да настройвате празните пространства. Това може да направи стиловия лист по-лесен за преглед, сравняване или включване в доклад.
Разкрасяването на CSS работи изцяло във вашия браузър. Входните ви данни се обработват на вашето устройство и не се качват или изпращат на сървър; след зареждане на страницата инструментът може да работи и офлайн. Това го прави практичен избор за разработчици и DevOps инженери, които искат бърз начин да форматират код на стилов лист, като го държат на собственото си устройство.
Стъпка 1: Поставете своя CSS, LESS или SCSS код във входа. Можете да използвате четим стилов лист или минифициран фрагмент.
Стъпка 2: Изберете стил на отстъпване: 2 интервала, 4 интервала или табулация. Задайте ширината на реда, за да контролирате колко дълги могат да бъдат форматираните редове.
Стъпка 3: Прегледайте форматирания изход. Ако входът не се разчита чисто, използвайте докладвания ред, за да намерите къде се нуждае от внимание.
Стъпка 4: Копирайте разкрасения код и го използвайте във вашия проект, преглед или документация.
Случай на употреба: Направете нечетим, машинно генериран CSS файл по-лесен за преглед, преди да го commit-нете.
Случай на употреба: Проверете CSS документ, който не сте писали вие, спрямо стила на форматиране, който следва вашият проект.
Случай на употреба: Форматирайте CSS, LESS или SCSS последователно, така че разликите в кода да показват значими промени вместо шум от празни пространства.
Случай на употреба: Разкрасете фрагмент от стилов лист, преди да го добавите към доклад за грешка или преглед на код.
Случай на употреба: Проверете дали стиловият лист се разчита чисто и намерете реда, където форматирането среща проблем.
Случай на употреба: Настройте отстъпването и ширината на реда, за да направите стиловите листове по-лесни за сканиране от вашия екип.
Случай на употреба: Преформатирайте минифициран код на стилов лист, когато трябва да инспектирате правилата му по време на отстраняване на грешки.