CSS para Less Conversor
Converter código CSS para Less com aninhamento
CSS de entrada
Less convertido
Exemplos CSS para Less
Seletores CSS planos são convertidos em Less aninhado. Exemplo:
Estrutura aninhada a partir de CSS plano
CSS de entrada:
Less convertido:
Use Exemplo acima para carregar mais dados de exemplo.
O que é CSS para Less?
Less é um pré-processador CSS que adiciona variáveis, aninhamento e mixins. Converter CSS puro para Less reestrutura com aninhamento e prepara para recursos Less. Esta ferramenta analisa seu CSS e gera estrutura estilo Less. As especificações W3C CSS definem a fonte; Less define a saída.
A conversão é executada completamente no seu navegador. Nada é enviado a nenhum servidor. A saída é Less válido. Para o reverso (Less para CSS), use Less para CSS. Para SCSS, CSS para SCSS.
Como usar esta ferramenta
Colar ou enviar CSS
Copie seu CSS e cole no editor à esquerda. Também pode clicar em Enviar para carregar um arquivo .css. O botão Exemplo carrega dados de exemplo. CSS inválido mostrará um erro.
Revisar a saída Less
O painel direito mostra Less convertido. Os seletores podem ser aninhados onde a estrutura permitir. Você pode adicionar variáveis e mixins manualmente após a conversão.
Copiar ou baixar
Use Copiar ou Baixar. Compile o Less com Less para CSS para verificar. Para formatar CSS primeiro, o Formatador CSS.
Quando CSS para Less ajuda
Ao migrar um projeto de CSS puro para Less, ou quando você tem CSS de uma exportação de design e quer integrá-lo em uma codebase baseada em Less (ex.: Bootstrap 3, Ant Design), esta conversão fornece um ponto de partida. Ferramentas de build como webpack e Gulp compilam Less. A saída fornece estrutura aninhada que você pode refinar com variáveis e mixins.
Ferramentas de design frequentemente exportam CSS puro. Converter para Less aqui permite adicioná-lo a uma estrutura baseada em componentes. Para SCSS em vez disso, CSS para SCSS. Para prefixos de vendor, o Prefixador CSS.
Perguntas frequentes
Adiciona variáveis ou mixins?
O conversor foca na estrutura (aninhamento). Não extrai automaticamente valores repetidos em variáveis. Adicione variáveis e mixins manualmente conforme suas necessidades.
Meus dados são privados?
Sim. A conversão é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.
Como funciona o aninhamento?
A ferramenta infere o aninhamento das relações entre seletores (ex.: .parent .child se torna aninhado). Seletores complexos podem permanecer planos. Revise e ajuste conforme necessário.
Less vs SCSS?
Ambos adicionam variáveis, aninhamento e mixins. Less é usado por Bootstrap 3, Ant Design. SCSS é usado por Bootstrap 4+, muitos frameworks modernos. Escolha com base na sua stack.
Posso compilar a saída?
Sim. Cole o Less em Less para CSS para compilar e verificar. A saída deve corresponder à sua estrutura CSS original.
Ferramentas relacionadas
Para Less: lesscss.org. W3C CSS e MDN CSS definem o formato fonte. Bootstrap. webpack. Figma.