Converter Less em CSS — Numio
Compile Less para CSS no seu navegador. Variáveis, aninhamento, mixins e operações são expandidos em CSS puro pelo compilador oficial less.js, para você conferir a saída sem instalar o lessc.
Conferir o CSS que variáveis, aninhamento e mixins do Less produzem.
Less
CSS
Quando usar
- Conferir o CSS que variáveis, aninhamento e mixins do Less produzem.
- Converter um arquivo Less pequeno para um projeto que usa CSS puro.
Como usar
- Cole código Less ou abra um arquivo .less.
- Escolha a configuração de prefixos de fornecedor para os navegadores que você atende.
- Revise o CSS gerado e copie-o.
Entrada Less
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}Saída CSS
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Detalhes e limitações
Uma variável não definida ou um colchete não fechado interrompe a compilação. Comece com um trecho curto ao procurar um erro.
A compilação roda no seu navegador. Um @import de uma URL externa pode fazer o navegador buscar esse recurso, então prefira código autocontido.
Imports de outros arquivos locais, plugins do Less e opções de compilador específicas do projeto não estão disponíveis. Os prefixos de fornecedor dependem da configuração de navegadores-alvo.
FAQ
É o mesmo que compilar com lessc?
Usa o less.js, o mesmo compilador que o lessc executa, então um arquivo autocontido compila para o mesmo CSS com as opções padrão. Recursos de projeto, como imports locais e plugins, não estão disponíveis aqui.
Posso compilar um arquivo que usa @import?
Imports que apontam para outros arquivos no seu computador não podem ser resolvidos no navegador. Cole o código importado diretamente ou compile o projeto inteiro com lessc.
Qual é a diferença entre Less e CSS?
Less é um pré-processador de CSS. Ele adiciona variáveis, aninhamento, mixins e funções, e precisa ser compilado para CSS antes que um navegador possa usá-lo.