Этот форматтер CSS красиво оформляет или минифицирует CSS, SCSS и LESS с помощью Prettier, с опциями сортировки объявлений по алфавиту и удаления дублирующихся свойств. Используйте его как инструмент красивого оформления CSS, чтобы навести порядок в неаккуратных таблицах стилей, или как форматтер SCSS и LESS при работе с препроцессорами. Переключитесь в режим минификации, чтобы убрать комментарии и пробелы и получить компактный продакшн-CSS. Он создан для фронтенд-разработчиков, дизайнеров и QA-инженеров, которым нужны согласованные, читаемые стили или быстрый способ форматировать css онлайн перед коммитом или код-ревью. Вы можете выбрать табуляцию или пробелы для отступов, выбрать синтаксис, соответствующий вашему файлу, и использовать вывод prettier css где угодно. Всё обрабатывается локально в вашем браузере, поэтому ваши таблицы стилей не покидают устройство и ничего не загружается на сервер.
Возможности
Красивое оформление или минификация CSS, SCSS и LESS с помощью Prettier
Выбор режима синтаксиса (CSS, SCSS или LESS) для точного разбора
Сортировка свойств по алфавиту в каждом правиле (обычный CSS)
Удаление дублирующихся объявлений из обычного CSS
Выбор табуляции или пробелов для отступов
Режим минификации убирает комментарии и пробелы для продакшна
Согласованное переформатирование вложенных правил и медиа-запросов
Работает полностью в вашем браузере
Как использовать Форматировщик CSS / SCSS
Вставьте свой CSS, SCSS или LESS в поле ввода.
Выберите режим синтаксиса (CSS, SCSS или LESS), соответствующий вашему файлу.
Выберите «Красиво оформить» для форматирования или «Минифицировать» для сжатия вывода.
Переключите «Сортировать свойства», «Удалить дубликаты» или «Табуляция», чтобы донастроить результат.
Скопируйте или скачайте отформатированный CSS из панели вывода.
Пример
Ввод
.btn{color:#FFF;padding:8px;color:#fff;}
Результат
.btn {
color: #fff;
padding: 8px;
}
Режим красивого оформления с удалёнными дублирующимися объявлениями.
Частые ошибки и устранение неполадок
Сортировка свойств или удаление дубликатов не работает на SCSS или LESS. — Сортировка и удаление дубликатов применяются к обычному CSS; переключите режим синтаксиса на CSS, если хотите, чтобы эти опции работали.
Переключатели «Сортировать свойства» и «Удалить дубликаты» отсутствуют на панели инструментов. — Эти переключатели появляются только в режиме красивого оформления с выбранным синтаксисом CSS; выключите минификацию и выберите CSS, чтобы их показать.
Минифицированный CSS трудно редактировать впоследствии. — Сохраняйте исходный файл; вывод минификации предназначен для продакшна, а не для дальнейшего редактирования.
Вывод не форматируется, потому что выбран неправильный синтаксис. — Сопоставьте режим синтаксиса вашему коду, например выберите SCSS для вложенности и переменных, чтобы Prettier разбирал его корректно.
Отступы не соответствуют стилю вашего проекта. — Переключите опцию «Табуляция», чтобы переключаться между табуляцией и пробелами перед копированием.
Часто задаваемые вопросы
Что такое форматтер CSS от ArrayKit?
Это браузерный форматтер CSS, который красиво оформляет или минифицирует CSS, SCSS и LESS с помощью Prettier и может сортировать свойства по алфавиту и удалять дублирующиеся объявления в обычном CSS.
Как минифицировать CSS с помощью форматтера CSS?
Вставьте свою таблицу стилей, выберите соответствующий режим синтаксиса, затем выберите «Минифицировать», чтобы убрать комментарии и пробелы и получить компактный продакшн-CSS, который можно скопировать или скачать.
Поддерживает ли форматтер CSS SCSS и LESS?
Да. Выберите синтаксис (CSS, SCSS или LESS), и он разберёт код соответственно. Сортировка свойств и удаление дубликатов применяются к обычному CSS.
Может ли форматтер CSS сортировать свойства по алфавиту?
Да. В режиме красивого оформления с выбранным CSS переключите «Сортировать свойства», чтобы упорядочить объявления по алфавиту в каждом правиле.
Какой движок форматирует CSS?
Красивое оформление использует Prettier, поэтому вывод соответствует тем же соглашениям, которые Prettier применяет в вашем редакторе и инструментах сборки.
Загружается ли мой CSS куда-либо форматтером CSS?
Нет. Форматтер CSS работает полностью в вашем браузере, поэтому ваши таблицы стилей обрабатываются локально и не покидают устройство.
Связанные инструменты
Форматировщик JS / TS — Форматирует JavaScript, TypeScript и JSX/TSX с опциями Prettier или минифицирует обычный JavaScript.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.
Конвертер цветов CSS — Преобразуйте между HEX, RGB и HSL с живым образцом цвета.
Проверка контраста — Проверяйте коэффициент контраста WCAG и соответствие AA/AAA между двумя цветами.
Оптимизатор SVG — Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.
Форматировщик JSON — Форматируйте, минимизируйте и проверяйте JSON с указанием места ошибок.
Другие инструменты: Форматировщики кода
Форматировщик JS / TS — Форматирует JavaScript, TypeScript и JSX/TSX с опциями Prettier или минифицирует обычный JavaScript.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.
Форматировщик GraphQL — Форматируйте или минифицируйте запросы и схемы GraphQL, проверяйте синтаксис и извлекайте операции.
Форматировщик Dockerfile — Форматируйте Dockerfile и получайте рекомендации по лучшим практикам и линту.