Por que formatar CSS
Um arquivo CSS minificado ou escrito por várias pessoas sem padrão é difícil de manter: seletores encadeados na mesma linha, declarações amontoadas, indentação que muda a cada bloco. Um formatador reorganiza tudo com regras fixas: um seletor por linha quando há vários, uma declaração por linha, espaço depois dos dois-pontos e chaves alinhadas.
Esta ferramenta usa o Prettier e aceita três sintaxes: CSS, SCSS e Less. Ao arrastar um arquivo, o analisador é escolhido pela extensão (.css, .scss, .less); ao colar código, você seleciona a sintaxe. Assim, variáveis, mixins, aninhamento e funções do SCSS e do Less são entendidos e formatados corretamente, em vez de gerar erro.
As opções são a indentação (2 espaços, 4 espaços ou tabulação) e a largura máxima da linha (80, 100 ou 120 caracteres), usada para quebrar listas longas de seletores ou valores como grid-template-areas e transições múltiplas. Formatar não altera nenhuma regra: o resultado tem exatamente a mesma cascata. Se houver um erro de sintaxe, a mensagem do analisador indica onde.
O processamento é feito no seu navegador, sem upload do código. O teste grátis cobre um arquivo ou um texto colado, que você pode reformatar com outras opções; para novos conteúdos, o ToolStudio Pro oferece uso ilimitado, vários arquivos de uma vez em um ZIP e nenhum anúncio.
Como formatar CSS, SCSS ou Less
- Cole o código ou arraste um arquivo .css, .scss ou .less.
- Se colou o código, escolha a sintaxe: CSS, SCSS ou Less.
- Defina a indentação e a largura da linha.
- Clique no botão para formatar.
- Copie o resultado ou baixe o arquivo formatado.
Quando formatar CSS
- Tornar legível o CSS minificado de um site ou biblioteca.
- Padronizar folhas de estilo antigas antes de refatorar.
- Organizar arquivos SCSS e Less herdados de outro projeto.
- Preparar CSS para um code review ou para um diff mais limpo.
- Formatar trechos de CSS para documentação e tutoriais.
CSS, SCSS e Less: por que o analisador importa
SCSS e Less estendem o CSS com variáveis ($cor ou @cor), aninhamento, mixins e operações. Um analisador de CSS puro não entende essas construções e pode recusar o arquivo ou formatá-lo errado. Por isso é importante escolher a sintaxe certa ou deixar que a extensão do arquivo faça isso por você.
O formatador não compila SCSS ou Less para CSS: o resultado continua na mesma sintaxe de entrada, só que organizado.
Perguntas Frequentes
Funciona com SCSS e Less?
Sim. O analisador é escolhido pela extensão do arquivo ou pelo seletor de sintaxe quando você cola o código.
O formatador compila SCSS para CSS?
Não. Ele apenas formata, mantendo a sintaxe original.
Posso desfazer a minificação de um CSS?
Sim. O formatador recoloca quebras de linha e indentação. Comentários removidos na minificação não podem ser recuperados.
Meu CSS sai do meu computador?
Não. A formatação acontece inteira no navegador.
É grátis?
Você pode testar com um arquivo ou um texto colado e reformatá-lo com outras opções. Para formatar novos conteúdos é preciso o ToolStudio Pro, com uso ilimitado, vários arquivos de uma vez em ZIP e sem anúncios.