Converter LESS para CSS Online
Compile código LESS para CSS puro no seu navegador. Sem npm, sem Node.js, sem configuração.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compilador LESS para CSS
Por que usar este compilador LESS?
Zero configuração
Sem npm, sem webpack, sem Grunt. Cole seu código LESS e obtenha CSS instantaneamente.
less.js oficial
Usa o compilador oficial less.js. Máxima compatibilidade com o padrão LESS.
Total privacidade
Seu código LESS nunca é enviado a nenhum servidor. Tudo roda no seu navegador.
Projetos Bootstrap 3
Compile facilmente temas de Bootstrap 3 e outros projetos legados baseados em LESS.
Como funciona
Três passos, sem complicação
Cole seu código LESS
Escreva ou cole seu código LESS no editor. Variáveis com @, aninhamento, mixins e operações matemáticas são suportados.
Compilação instantânea
O CSS resultante aparece automaticamente. O compilador LESS.js roda localmente no seu navegador.
Copie ou baixe o CSS
Copie o CSS para a área de transferência ou baixe como arquivo .css pronto para usar.
Perguntas frequentes
Ficou com dúvidas?
LESS (criado por Alexis Sellier, conhecido como cloudhead, em 2009) e SCSS (parte do Sass, criado em 2006) são pré-processadores CSS com filosofias diferentes. A diferença mais visível é a sintaxe de variáveis: LESS usa @ — o mesmo prefixo que regras at do CSS como @media, o que pode causar confusão — enquanto SCSS usa $. O LESS foi projetado para ser processado tanto no cliente via less.js quanto no servidor — algo que o Sass não previu inicialmente. O SCSS tem um ecossistema mais rico (Compass, Bootstrap 4 ou superior, Angular) e o compilador oficial Dart Sass. O LESS continua relevante principalmente pela base de projetos que usaram Bootstrap 3 e pelo seu compilador JavaScript nativo (less.js).
Variáveis LESS são definidas com @nome: valor; e usadas diretamente: @base-color: #4d90fe; @font: Roboto, sans-serif; color: @base-color. Uma característica peculiar do LESS é a avaliação preguiçosa (lazy evaluation): as variáveis podem ser usadas antes de serem declaradas no mesmo escopo, pois o LESS processa o arquivo inteiro antes de resolver os valores. Isso contrasta com o SCSS onde as variáveis seguem uma ordem de declaração mais estrita. Variáveis LESS também podem ser interpoladas em seletores e nomes de propriedades usando a sintaxe @{nome}.
Mixins no LESS são definidos como classes CSS normais e invocados com a mesma sintaxe: .mixin() define o mixin e chamar .mixin() dentro de outra regra o inclui. Não existe a palavra-chave @mixin como no SCSS. Isso significa que qualquer classe CSS existente pode ser usada como mixin apenas chamando-a. Mixins parametrizados usam a sintaxe .mixin(@param: valor-padrao). O LESS também suporta guardas de mixin: .mixin(@a) when (@a > 10) para compilação condicional, um recurso que o SCSS implementa com @if.
Não. O Bootstrap 3 (2013) foi o grande momento de adoção massiva do LESS, tornando-o o pré-processador conhecido por toda uma geração de desenvolvedores web. O Bootstrap 4 (2018) migrou completamente para SCSS (Sass), e o Bootstrap 5 (2021) continuou com SCSS. A migração do Bootstrap foi um dos fatores que consolidou o SCSS como o pré-processador dominante no ecossistema moderno. Se você tem um projeto legado com Bootstrap 3, esta ferramenta pode ajudá-lo a extrair o CSS compilado sem precisar manter um ambiente de compilação LESS.
A ferramenta compila o código LESS que você fornece diretamente, mas não consegue resolver referências a arquivos externos via @import pois opera no navegador sem acesso ao sistema de arquivos. Se você tem múltiplos arquivos LESS, pode concatená-los manualmente antes de compilar. Para projetos com estrutura modular complexa, ainda é necessário um ambiente de compilação local com less.js ou a integração do LESS no seu bundler (webpack, Vite ou Parcel).
O LESS ainda é necessário em três contextos principais: manutenção de projetos legados com Bootstrap 3 ou temas de WordPress, Magento ou Drupal que usam LESS; extração de CSS de snippets LESS encontrados em código herdado para migrá-lo para CSS nativo ou SCSS; e aprendizado da sintaxe LESS para trabalhar com bases de código existentes. Para projetos novos, a recomendação atual é SCSS/Sass ou diretamente CSS moderno com custom properties e @layer.
LESS para CSS online: compile LESS sem npm ou Node.js, ideal para projetos Bootstrap 3
LESS é uma linguagem de pré-processamento de CSS criada por Alexis Sellier (conhecido online como cloudhead) e publicada em 2009 como software open source sob a licença Apache. Sellier a escreveu originalmente em Ruby, mas a reescrita em JavaScript (less.js) em 2010 foi o momento que definiu sua popularidade: pela primeira vez, um pré-processador CSS poderia rodar diretamente no navegador carregando o arquivo .less e a biblioteca less.js via tag script. Essa capacidade de compilação no cliente — embora raramente usada em produção por razões de desempenho — democratizou o acesso ao pré-processamento CSS sem necessidade de infraestrutura de build. Os principais recursos do LESS são herança direta de CSS (qualquer CSS válido é LESS válido), variáveis com prefixo @ (@color: #fff), aninhamento de seletores com comportamento idêntico ao do SCSS, mixins como classes invocáveis (.mixin()), operações aritméticas diretas em valores (margin: @base * 2) e funções de cor integradas como lighten, darken e mix.
O maior impacto do LESS no ecossistema web veio por meio do Bootstrap, o framework de UI mais popular do mundo. Bootstrap 2 (2012) e Bootstrap 3 (agosto de 2013) usaram LESS como sistema de personalização e compilação, expondo milhões de desenvolvedores web à sintaxe do LESS por meio do sistema de variáveis e mixins do framework. Temas de Bootstrap 3 eram distribuídos como coleções de arquivos .less com variáveis personalizadas que compilavam o CSS final. Essa integração tornou o LESS o pré-processador mais conhecido durante o período de 2013 a 2018, embora o SCSS já fosse tecnicamente mais rico e tivesse maior adoção na comunidade de desenvolvedores Ruby e Angular. A decisão do Bootstrap 4 — com alpha em 2015 e lançamento estável em janeiro de 2018 — de migrar para SCSS foi o ponto de virada definitivo: novos projetos migraram para SCSS e o LESS ficou associado principalmente à manutenção de projetos legados.
A necessidade de um compilador LESS online em 2024 se concentra principalmente em três cenários de manutenção e migração. O primeiro é o ecossistema legado do Bootstrap 3: embora o Bootstrap 5 esteja disponível há anos, muitas aplicações corporativas e sites WordPress ainda usam temas baseados em Bootstrap 3 com personalizações em LESS. Quando você precisa extrair CSS compilado de um snippet específico ou verificar a saída de uma variável ou mixin, fazer isso online é mais rápido do que manter um ambiente de compilação. O segundo cenário é a migração de LESS para SCSS ou CSS moderno: entender que CSS um bloco LESS específico gera é o primeiro passo para reescrevê-lo em SCSS ou com custom properties nativas. O terceiro cenário envolve a manutenção de temas Magento (que usa LESS extensivamente no sistema de temas do Magento 2), certos temas Drupal e aplicações construídas sobre frameworks internos que adotaram LESS durante o período de 2012 a 2017. O Convertir.ai executa o compilador less.js oficial no seu navegador sem enviar nenhuma linha de código para servidores externos.