Форматировщик CSS / SCSS

Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.

Ваш CSS форматируется локально в браузере, и ничего не загружается на сервер.

Нужно красиво оформить и JavaScript? Попробуйте JS Formatter.

Об инструменте Форматировщик CSS / SCSS

Этот форматтер CSS красиво оформляет или минифицирует CSS, SCSS и LESS с помощью Prettier, с опциями сортировки объявлений по алфавиту и удаления дублирующихся свойств. Используйте его как инструмент красивого оформления CSS, чтобы навести порядок в неаккуратных таблицах стилей, или как форматтер SCSS и LESS при работе с препроцессорами. Переключитесь в режим минификации, чтобы убрать комментарии и пробелы и получить компактный продакшн-CSS. Он создан для фронтенд-разработчиков, дизайнеров и QA-инженеров, которым нужны согласованные, читаемые стили или быстрый способ форматировать css онлайн перед коммитом или код-ревью. Вы можете выбрать табуляцию или пробелы для отступов, выбрать синтаксис, соответствующий вашему файлу, и использовать вывод prettier css где угодно. Всё обрабатывается локально в вашем браузере, поэтому ваши таблицы стилей не покидают устройство и ничего не загружается на сервер.

Возможности

Как использовать Форматировщик CSS / SCSS

  1. Вставьте свой CSS, SCSS или LESS в поле ввода.
  2. Выберите режим синтаксиса (CSS, SCSS или LESS), соответствующий вашему файлу.
  3. Выберите «Красиво оформить» для форматирования или «Минифицировать» для сжатия вывода.
  4. Переключите «Сортировать свойства», «Удалить дубликаты» или «Табуляция», чтобы донастроить результат.
  5. Скопируйте или скачайте отформатированный CSS из панели вывода.

Пример

Ввод

.btn{color:#FFF;padding:8px;color:#fff;}

Результат

.btn {
  color: #fff;
  padding: 8px;
}

Режим красивого оформления с удалёнными дублирующимися объявлениями.

Частые ошибки и устранение неполадок

Часто задаваемые вопросы

Что такое форматтер 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 работает полностью в вашем браузере, поэтому ваши таблицы стилей обрабатываются локально и не покидают устройство.

Связанные инструменты

Все инструменты ArrayKit