O que é o Formatador de CSS da ArrayKit?

É um formatador de css no navegador que embeleza ou minifica CSS, SCSS e LESS com Prettier, e pode ordenar propriedades em ordem alfabética e remover declarações duplicadas em CSS puro.

Como minifico CSS com o Formatador de CSS?

Cole sua folha de estilo, escolha o modo de sintaxe correspondente e selecione Minificar para remover comentários e espaços em branco e gerar um CSS compacto de produção que você pode copiar ou baixar.

O Formatador de CSS suporta SCSS e LESS?

Sim. Escolha a sintaxe (CSS, SCSS ou LESS) e ele interpreta de acordo. A ordenação de propriedades e a remoção de duplicadas se aplicam ao CSS puro.

O Formatador de CSS pode ordenar propriedades em ordem alfabética?

Sim. No modo Embelezar com CSS selecionado, ative Ordenar props para reorganizar as declarações em ordem alfabética dentro de cada regra.

Qual motor formata o CSS?

O embelezamento usa o Prettier, então a saída segue as mesmas convenções que o Prettier aplica no seu editor e nas ferramentas de build.

Meu CSS é enviado para algum lugar pelo Formatador de CSS?

Não. O formatador de css roda inteiramente no seu navegador, então suas folhas de estilo são processadas localmente e nunca saem do seu dispositivo.

Formatador de CSS / SCSS

Embeleze ou minifique CSS/SCSS/LESS, ordene propriedades e remova duplicatas.

Seu CSS é formatado localmente no seu navegador e nada é enviado para um servidor.

Precisa embelezar JavaScript também? Experimente o JS Formatter.

Sobre Formatador de CSS / SCSS

Este formatador de css embeleza ou minifica CSS, SCSS e LESS usando Prettier, com opções para ordenar declarações em ordem alfabética e remover propriedades duplicadas. Use-o como embelezador de css para limpar folhas de estilo bagunçadas, ou como formatador de scss e formatador de less ao trabalhar entre pré-processadores. Mude para o modo de minificação para remover comentários e espaços em branco e gerar um CSS compacto para produção. Foi feito para desenvolvedores front-end, designers e engenheiros de QA que precisam de estilos consistentes e legíveis ou de uma forma rápida de formatar css online antes de um commit ou revisão de código. Você pode escolher tabulações ou espaços para a indentação, selecionar a sintaxe que combina com seu arquivo e reutilizar a saída do prettier css em qualquer lugar. Tudo é processado localmente no seu navegador, então suas folhas de estilo nunca saem do seu dispositivo e nada é enviado para um servidor.

Recursos

Embeleze ou minifique CSS, SCSS e LESS usando Prettier
Escolha o modo de sintaxe (CSS, SCSS ou LESS) para um parsing preciso
Ordene propriedades em ordem alfabética dentro de cada regra (CSS puro)
Remova declarações duplicadas de CSS puro
Escolha tabulações ou espaços para a indentação
O modo de minificação remove comentários e espaços em branco para produção
Reformata regras aninhadas e media queries de forma consistente
Roda inteiramente no seu navegador

Como usar Formatador de CSS / SCSS

Cole seu CSS, SCSS ou LESS na caixa de entrada.
Escolha o modo de sintaxe (CSS, SCSS ou LESS) que combina com seu arquivo.
Selecione Embelezar para formatar ou Minificar para compactar a saída.
Ative Ordenar props, Remover duplicadas ou Tabulações para ajustar o resultado.
Copie ou baixe o CSS formatado do painel de saída.

Exemplo

Entrada

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

Saída

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

Modo Embelezar com declarações duplicadas removidas.

Erros comuns e solução de problemas

A ordenação ou remoção de duplicadas não tem efeito em SCSS ou LESS. — Ordenar e remover duplicadas se aplicam ao CSS puro; mude o modo de sintaxe para CSS se quiser que essas opções funcionem.
Os botões Ordenar props e Remover duplicadas não aparecem na barra de ferramentas. — Esses botões só aparecem no modo Embelezar com a sintaxe CSS selecionada; desative Minificar e escolha CSS para exibi-los.
O CSS minificado é difícil de editar depois. — Guarde seu arquivo de origem original; a saída minificada é destinada à produção, não a edições posteriores.
A saída falha ao formatar porque a sintaxe errada está selecionada. — Combine o modo de sintaxe com seu código, por exemplo escolha SCSS para aninhamento e variáveis, para que o Prettier o interprete corretamente.
A indentação não corresponde ao estilo do seu projeto. — Ative a opção Tabulações para alternar entre tabulações e espaços antes de copiar.

Perguntas frequentes

O que é o Formatador de CSS da ArrayKit?: É um formatador de css no navegador que embeleza ou minifica CSS, SCSS e LESS com Prettier, e pode ordenar propriedades em ordem alfabética e remover declarações duplicadas em CSS puro.
Como minifico CSS com o Formatador de CSS?: Cole sua folha de estilo, escolha o modo de sintaxe correspondente e selecione Minificar para remover comentários e espaços em branco e gerar um CSS compacto de produção que você pode copiar ou baixar.
O Formatador de CSS suporta SCSS e LESS?: Sim. Escolha a sintaxe (CSS, SCSS ou LESS) e ele interpreta de acordo. A ordenação de propriedades e a remoção de duplicadas se aplicam ao CSS puro.
O Formatador de CSS pode ordenar propriedades em ordem alfabética?: Sim. No modo Embelezar com CSS selecionado, ative Ordenar props para reorganizar as declarações em ordem alfabética dentro de cada regra.
Qual motor formata o CSS?: O embelezamento usa o Prettier, então a saída segue as mesmas convenções que o Prettier aplica no seu editor e nas ferramentas de build.
Meu CSS é enviado para algum lugar pelo Formatador de CSS?: Não. O formatador de css roda inteiramente no seu navegador, então suas folhas de estilo são processadas localmente e nunca saem do seu dispositivo.

Ferramentas relacionadas

Formatador de JS / TS — Embeleze ou minifique JavaScript, TypeScript e JSX/TSX com opções do Prettier.
Formatador de HTML — Embeleze ou minifique HTML, formate CSS/JS inline e veja a prévia do resultado.
Formatador de XML — Embeleze, minifique e valide XML, e converta XML ↔ JSON.
Formatador de SQL — Formate SQL para MySQL, PostgreSQL, SQL Server, SQLite, BigQuery e Oracle.
Conversor de cores CSS — Converta entre HEX, RGB e HSL com uma amostra ao vivo.
Verificador de contraste — Verifique a relação de contraste WCAG e se passa em AA/AAA entre duas cores.
Otimizador de SVG — Minifique SVG: remova comentários, metadados e restos do editor, e colapse espaços.
Formatador de JSON — Embeleze, minifique e valide JSON com a localização dos erros.