Less Formatter
Formate folhas de estilos Less com este Less Formatter. Cole código Less e a ferramenta organiza variáveis, regras aninhadas, mixins com parâmetros, chamadas de mixins, guards, funções e media queries com indentação de dois espaços, uma declaração por linha e espaçamento consistente após dois-pontos e vírgulas. Os valores padrão dos parâmetros dos mixins permanecem compactos, para que desenvolvedores front-end tenham código Less legível sem executar o compilador.
Perguntas frequentes
Como funciona o Less Formatter?
Ele lê sua folha de estilos como tokens, como chaves, ponto e vírgula, dois-pontos, strings e comentários, e reconstrói a disposição a partir deles. Cada chave de abertura inicia um bloco indentado em dois espaços, e cada declaração fica em sua própria linha.
Como as variáveis são formatadas?
Declarações de variáveis como @color: #333; recebem um espaço após os dois-pontos e terminam com ponto e vírgula. Referências a variáveis dentro dos valores são mantidas como foram escritas.
Como são tratados os mixins com parâmetros?
Dentro dos parênteses dos parâmetros de mixins, os dois-pontos permanecem junto deles, então .mixin(@size:10px) mantém seu valor padrão compacto. As vírgulas entre os argumentos recebem um único espaço depois delas.
As chamadas de mixins ficam em linhas próprias?
Sim, chamadas como .mixin(5px); ou .bordered; terminam com ponto e vírgula e ficam em uma linha própria dentro da regra. Seletores aninhados e regras &:hover são indentados um nível a mais.
As funções e operações são alteradas?
Funções como darken(@color, 10%) são mantidas com um espaço após cada vírgula, e o sinal de mais recebe um espaço de cada lado; assim, 1px+2px vira 1px + 2px. Guards como when (@a > 0) são mantidos na linha do seletor.
A ferramenta compila ou verifica meu Less?
Não, ela não compila para CSS nem valida a sintaxe, então também formata trechos inacabados. Use o compilador Less para encontrar erros e gerar CSS.
Os comentários são preservados?
Sim, comentários de linha // são mantidos e encerram a linha, então o próximo código começa abaixo deles. Comentários de bloco são mantidos onde aparecem.
Posso ajustar a indentação?
Não, o formatador sempre usa dois espaços e não oferece configurações. Portanto, a mesma folha de estilos sempre gera o mesmo resultado.
Por que a saída está delimitada como less?
O resultado é retornado como um bloco de código Markdown marcado como less, que aparece com destaque em Markdown. Copie as linhas entre os delimitadores para o seu arquivo .less.
Qual pode ser o tamanho da minha folha de estilos?
Até 5 MB por execução; entradas maiores são rejeitadas com uma mensagem. A saída é idêntica à opção Less do Code Formatter.