Compilador de Less para CSS

Este Compilador de Less para CSS converte código-fonte Less em CSS padrão diretamente no seu navegador, usando o mecanismo oficial Less.js. Ele foi projetado para desenvolvedores front-end, designers, estudantes e equipes de conteúdo que precisam de uma maneira rápida de testar variáveis, mixins, aninhamento, aritmética, funções de cor e guards de mixin sem precisar iniciar um fluxo de build completo.

Como Usar

1. Colar o código Less: Cole o seu código-fonte Less no editor à esquerda ou clique em uma inicialização rápida (Tokens de design, Biblioteca de mixins, Matemática e unidades, Funções de cor ou Guards de mixin).
2. Escolher as opções de compilação: Escolha o formato de saída (Expandido para leitura fácil, Compactado para minificação) e ajuste o Modo matemático ou a alternância de Unidades estritas se o seu código precisar deles.
3. Compilar Less: Clique em Compilar Less para executar o mecanismo oficial Less.js diretamente no seu navegador. Com a Compilação ao vivo ativada, o resultado também é atualizado automaticamente conforme você digita.
4. Revisar o CSS: Leia o CSS gerado, analise as métricas de compilação (linhas, tamanho de saída, blocos de regras, proporção de tamanho), abra a visualização de diferenças e verifique o quadro de visualização ao vivo em sandbox.
5. Copiar ou baixar: Copie o CSS compilado para a área de transferência com um clique ou baixe-o como um arquivo .css pronto para publicação.

O Que Torna Este Compilador Less Diferente

• Fluxo de compilação animado: Assista ao seu código-fonte passar por Análise → Avaliação → CSS, com a etapa ativa destacada em tempo real e qualquer etapa com falha marcada em vermelho.
• Visualização de diferenças lado a lado: Alterne do CSS bruto para um layout Less-vs-CSS que mostra exatamente quais recursos do Less (variáveis, mixins, matemática, funções de cor) produziram quais regras CSS.
• Cinco trechos iniciais selecionados: Cada inicializador foca em um conceito diferente do Less (tokens, mixins, matemática, funções de cor, guards de mixin) para que você possa aprender ou comparar sem escrever códigos de configuração.
• Avisos inteligentes: Dicas contextuais aparecem quando o seu código usa @import no navegador, divisão sem parênteses no modo matemático do Less 4 ou propriedades que possam precisar de prefixos de fornecedores em produção.
• Quadro de visualização dinâmico em sandbox: O CSS compilado é aplicado dentro de um iframe isolado para que nunca afete o restante do MiniWebtool, oferecendo uma verificação visual segura.
• Métricas de compilação com proporção: Veja não apenas o tamanho da saída, mas também como ele se compara ao seu código Less original — muito útil ao avaliar o impacto do modo compactado ou de refatorações.

Tabela Comparativa Rápida: Less vs SCSS vs CSS

Modos Matemáticos do Less Explicados

O Less 4 alterou a forma como a aritmética é analisada, o que às vezes surpreende desenvolvedores que migram trechos mais antigos. Use o seletor de Modo matemático no painel de opções:

• Divisão por parênteses (padrão): Todas as operações matemáticas rodam sem parênteses, exceto a divisão, que deve ser envolvida por parênteses — por exemplo, (@base / 2). Isso evita divisões acidentais em valores abreviados como font: 10px/14px.
• Sempre: Comportamento herdado do Less 3 — cada operador (incluindo /) roda sem parênteses. Mude para esta opção ao compilar bases de código mais antigas.
• Estrito: Apenas as expressões dentro de parênteses são tratadas como matemática. Útil quando você deseja uma aritmética totalmente previsível e não quer que o Less faça suposições.

Combine isso com a opção de Unidades estritas para bloquear operações entre unidades incompatíveis (ex: 10px + 2%), que é uma fonte comum de bugs silenciosos.

Recursos Comuns do Less Suportados

• Variáveis: @radius: 14px; referenciadas em qualquer lugar do arquivo.
• Aninhamento & seletor pai: &:hover, &__badge, e regras profundamente aninhadas.
• Mixins: Blocos reutilizáveis de .shadow(@color), além de guards de mixin para saídas condicionais.
• Funções de cor: darken(), lighten(), fade(), spin(), mix() e muito mais.
• Matemática: Aritmética com unidades (@gap * 1.5, @radius - 4px), regida pelo Modo matemático.
• Laços & recursão: Mixins recursivos para gerar classes utilitárias ou colunas de grade.
• Funções: unit(), lightness(), extract(), length() e o pacote completo de funções Less.

Limitações da Compilação no Navegador

A compilação no navegador é ideal para verificações rápidas, aprendizado, protótipos e trechos de revisão de código — mas não consegue acessar o sistema de arquivos do seu projeto. Instruções @import que referenciam arquivos parciais locais falharão, a menos que você cole esses arquivos parciais diretamente no editor acima do código que os consome. Para lançamentos em produção, execute seu fluxo de build normal para obter prefixação automática, resolução completa de @import, mapas de fontes source maps e minificação ajustada para o seu empacotador bundler.

Casos de Uso

• Migração: Colar Less legados do Bootstrap 3 ou de sistemas de design mais antigos e inspecionar o CSS compilado para planejar uma conversão.
• Aprendizado: Alternar predefinições para ver como um único conceito Less (matemática, mixin, guard, função de cor) é mapeado para o CSS puro.
• Revisão de código: Verificar rapidamente se uma alteração em Less produz o resultado esperado antes de aprovar e realizar o merge de um PR.
• Documentação: Gerar exemplos de CSS para postagens de blog, wikis internas ou entregas de componentes.
• Depuração: Isolar uma regra Less com comportamento incorreto fora do seu build completo para confirmar se o bug está no seu código ou na cadeia de ferramentas toolchain.

Perguntas Frequentes (FAQ)

O que é um compilador de Less para CSS?

Um compilador de Less para CSS converte o código-fonte Less (que usa variáveis, mixins, aninhamento e aritmética) em CSS padrão que os navegadores podem renderizar. O Less é um pré-processador CSS introduzido em 2009 e amplamente utilizado no Bootstrap 3 e em muitos sistemas de design.

O compilador roda no meu navegador?

Sim. O mecanismo oficial Less.js é carregado no seu navegador e compila o código-fonte localmente. Seu código Less não é enviado para os servidores do MiniWebtool durante o uso normal.

Qual é a diferença entre Less e Sass ou SCSS?

O Less usa o prefixo @ para variáveis (por exemplo, @brand) e foi escrito originalmente em Ruby, sendo posteriormente portado para JavaScript. O SCSS usa $ para variáveis (por exemplo, $brand) e faz parte do ecossistema Sass. Ambos suportam aninhamento, mixins e aritmética, mas a sintaxe e os nomes das funções diferem. Esta ferramenta compila apenas Less; para Sass, use o nosso Compilador de SCSS para CSS.

Ele suporta instruções @import?

A compilação no navegador não pode ler arquivos de projetos privados. Cole os arquivos parciais Less importados diretamente no editor ao testar um trecho que dependa de caminhos de arquivos locais. Para uma resolução completa de @import, execute a compilação dentro do seu fluxo de compilação build pipeline.

Por que estou obtendo um resultado errado de uma expressão matemática?

O Less 4 adota por padrão a divisão por parênteses e matemática não estrita. Envolva as divisões entre parênteses ou ative a Matemática estrita no painel de opções para que toda a aritmética seja executada apenas dentro de parênteses. A opção de Unidades estritas bloqueia operações entre unidades incompatíveis, como px e %.

O CSS compilado está pronto para produção?

O CSS gerado é ótimo para testes rápidos, protótipos, aprendizado e pequenos trechos. Para uso em produção, execute seu fluxo de compilação normal para obter prefixação automática, minificação, mapas de fontes source maps e resolução completa de @import.

Posso compilar um arquivo .less completo do meu disco?

Sim — use a opção Carregar arquivo .less no painel de opções. Seu navegador lê o arquivo localmente e joga o conteúdo no editor; nada é enviado para a internet. Se o arquivo usar @import para carregar arquivos parciais, cole esses arquivos parciais acima do código importador para que funcionem corretamente.