Less para CSS Conversor
Converter código Less para CSS pronto para navegador
Less de entrada
CSS compilado
Exemplos Less para CSS
Variáveis, mixins e aninhamento Less compilam para CSS puro. Exemplo:
Variáveis, mixins e seletores aninhados
Less de entrada:
CSS compilado:
Use Exemplo acima para carregar mais dados de exemplo.
O que é Less para CSS?
Less é um pré-processador CSS que adiciona variáveis, aninhamento, mixins e funções. Navegadores não executam Less—precisam de CSS puro. Esta ferramenta compila seu Less para CSS pronto para navegador. A documentação Less define a sintaxe.
A compilação é executada completamente no seu navegador. Nada é enviado a nenhum servidor. A saída é CSS padrão. Para o reverso (CSS para Less), use CSS para Less. Para SCSS, SCSS para CSS.
Como usar esta ferramenta
Colar ou enviar Less
Copie seu Less e cole no editor à esquerda. Também pode clicar em Enviar para carregar um arquivo .less ou .css. O botão Exemplo carrega dados de exemplo. Less inválido mostrará um erro.
Ver o CSS compilado
O painel direito mostra o CSS compilado. As variáveis são resolvidas, o aninhamento é achatado e os mixins são expandidos. A saída é CSS puro que qualquer navegador pode usar.
Copiar ou baixar
Use Copiar ou Baixar. Para formatar a saída, o Formatador CSS. Para minificar, o Minificador CSS.
Quando Less para CSS ajuda
Quando você tem Less de um projeto (ex.: Bootstrap 3, Ant Design) ou codebase legado mas precisa de CSS puro—para um teste rápido, implantação CDN ou sistema sem ferramentas de build—esta compilação ajuda. Também útil para depuração: ver exatamente qual CSS seu Less produz.
Less é usado por muitos projetos antigos e alguns frameworks UI. Se você personaliza variáveis ou extrai estilos, compilar aqui fornece o CSS final. Para converter CSS existente para estrutura Less, use CSS para Less.
Perguntas frequentes
Less vs SCSS?
Ambos adicionam variáveis, aninhamento e mixins. Less usa & para seletores pai; SCSS também. A sintaxe difere ligeiramente. Escolha com base no seu projeto.
Suporta @import?
Imports podem não ser resolvidos se os arquivos não forem enviados. Para projetos multiarquivo, use o compilador Less oficial ou seu bundler.
Meus dados são privados?
Sim. A compilação é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.
E mixins e funções?
Mixins e funções incorporadas (ex.: lighten(), darken()) são expandidos durante a compilação. O CSS de saída contém os valores resolvidos.
Posso usar com Bootstrap 3?
Bootstrap 3 usa Less. Para compilação completa do Bootstrap, use o build oficial. Esta ferramenta funciona para Less de arquivo único ou snippets.
Ferramentas relacionadas
Para Less: lesscss.org e uso de Less. MDN CSS e W3C CSS definem o formato de saída.