Formatador de CSS online (CSS, SCSS e Less)

O formatador de CSS reescreve uma folha de estilos com uma declaração por linha, indentação consistente e espaços padronizados, e funciona também com SCSS e Less. Se houver erro de sintaxe, como uma chave sem fechar, a ferramenta mostra a linha e a coluna. Tudo roda no seu navegador, sem enviar o código a nenhum servidor.

Atualizado em · Por Leonardo Gaertner

A formatação é feita no seu navegador. O código e os arquivos não são enviados a nenhum servidor.

Achou um resultado errado ou tem uma sugestão? Avise por e-mail.

Como usar

  1. Cole o CSS no campo da esquerda, ou clique em Abrir arquivo.
  2. Escolha a linguagem (CSS, SCSS ou Less) e a indentação.
  3. Clique em Copiar resultado ou em Baixar arquivo.

Como funciona

A formatação usa o Prettier. Cada declaração vai para uma linha, com um espaço depois dos dois-pontos e ponto e vírgula no final, e cada regra ganha suas chaves e indentação. Seletores e consultas de mídia recebem espaços padronizados, como em .a > .b e (max-width: 600px).

Propriedades com listas separadas por vírgula, como font e transition com vários valores, são quebradas em uma linha por valor quando isso melhora a leitura. Comentários são mantidos.

A ferramenta muda a formatação, e não o significado: propriedades, valores e a ordem das regras continuam os mesmos. Ela não minifica o CSS. Para SCSS e Less, escolha a linguagem certa, senão variáveis e aninhamento de regras podem ser recusados como erro.

Exemplo

Entrada: .card{color:red;margin:0 auto}

Saída:

.card {

color: red;

margin: 0 auto;

}

Fonte: Prettier: opções de formatação; MDN: CSS

Perguntas frequentes

Formatar o CSS muda o estilo da página?

Não. Só a aparência do código muda, com espaços, quebras de linha e o estilo das aspas. As propriedades, os valores e a ordem das regras continuam iguais.

A ferramenta minifica CSS?

Não. Ela deixa o CSS legível. Para reduzir o tamanho em produção, use o minificador do seu empacotador ou um minificador específico.

Por que aparece "CSS inválido"?

Porque há um erro de sintaxe, como uma chave { sem a } correspondente, um texto entre aspas aberto ou uma declaração incompleta. A mensagem indica a linha e a coluna. Se o código for SCSS ou Less, escolha a linguagem na lista.

Funciona com SCSS e Less?

Sim. Escolha SCSS ou Less em Linguagem, e variáveis, aninhamento de regras e mixins são reconhecidos e formatados.

Outras ferramentas que podem ajudar

Ver tudo em JSON, dados e formatadores