Entrada Less

CSS Compilado

O que é Less para CSS?

Navegadores entendem CSS, não a sintaxe Less. Este conversor transforma seu código Less em CSS padrão para que você possa usar variáveis, aninhamento e padrões de estilo reutilizáveis enquanto ainda entrega saída compatível com navegadores.

Use quando você quiser compilação rápida sem configurar um pipeline de build. Tudo roda localmente no seu navegador, então seu código permanece privado e a conversão é instantânea.

Como Usar o Conversor Less para CSS

Siga estes passos para compilar Less em CSS compatível com navegadores. Cada passo usa os botões e painéis reais desta página.

Colar, Enviar ou Carregar Exemplo

Cole Less no painel esquerdo Entrada Less, ou clique em Enviar para carregar um arquivo .less. Clique em Exemplo para ver estilos de cartão de assinante com variáveis e mixins. Exemplo de entrada Less:

@primary: #2563eb;
@spacing: 12px;
.subscriber-card {
  padding: @spacing;
  .plan-badge { color: @primary; font-weight: 700; }
  &:hover { background: #eef2ff; }
}

Ver CSS Compilado

O painel direito CSS Compilado mostra a saída instantaneamente. Variáveis são resolvidas, aninhamento é achatado, mixins são expandidos.

Copiar ou Baixar

Clique em Copiar para copiar para a área de transferência, ou Baixar para salvar como .css. Use Limpar para recomeçar. Toda a compilação roda no seu navegador.

Ferramentas CSS Relacionadas

Compilação geralmente é um passo em um fluxo de trabalho de estilos. Você também pode precisar de:

Conversor de Less para CSS