Как это работает
Переформатирует отступы и упорядочивает сжатые или плохо выровненные таблицы стилей CSS или SCSS, делая их читаемыми. Полезно для изучения минифицированных стилей, просмотра стороннего CSS или унификации формата перед сохранением.
Позволяет выбрать тип отступа (пробелы или табуляция), размер отступа и конец строки. Каждое объявление располагается на своей строке, а селекторы, разделённые запятыми, размещаются на отдельных строках.
Обработка полностью локальна, в вашем браузере, с помощью js-beautify. Форматируется представление; минификация, переупорядочивание свойств и проверка корректности правил не выполняются.
Примеры
a,b{color:red;margin:0}a,
b {
color: red;
margin: 0
}Селекторы разбиваются по строкам, и каждое свойство получает отступ.Сценарии использования
- Сделать минифицированный файл .css сайта читаемым.
- Привести отступы таблицы стилей к единому виду перед коммитом.
- Просматривать и сравнивать правила CSS из фреймворка или библиотеки.
- Упорядочить SCSS, вставленный из документации или генераторов.
Часто задаваемые вопросы
Подходит ли он также для SCSS или LESS?
Он форматирует CSS и совместимый синтаксис, например SCSS, включая вложенные правила. Он не компилирует SCSS или LESS в CSS: только переупорядочивает отступы и переносы строк.
Переупорядочивает ли он или группирует свойства?
Нет. Он сохраняет исходный порядок селекторов и объявлений. Он меняет только интервалы, отступы и переносы строк для улучшения читаемости.
Это то же самое, что минификация CSS?
Нет, наоборот. Форматирование добавляет пробелы и переносы, чтобы лучше читать; минификация убирает их, чтобы уменьшить размер файла. Для сжатия используйте инструмент минификации.
Загружается ли мой код на сервер?
Нет. Форматирование происходит полностью в браузере; CSS никогда не покидает ваш компьютер.