Eu tenho um arquivo CSS bastante grande que desejo converter para menos. Quando escrevi o CSS, não conhecia less.css, mas agora ainda quero usar meu CSS antigo.
Existe uma ferramenta que possa me ajudar a convertê-lo automaticamente?
Eu tenho um arquivo CSS bastante grande que desejo converter para menos. Quando escrevi o CSS, não conhecia less.css, mas agora ainda quero usar meu CSS antigo.
Existe uma ferramenta que possa me ajudar a convertê-lo automaticamente?
Respostas:
Na verdade, encontrei algo agora: http://leafo.net/lessphp/lessify/
Faz uma formatação básica, por exemplo:
#header {
/* ... */
}
#header p {
/* ... */
}
para
#header {
/* ... */
p {
/* ... */
}
}
Na verdade, você não precisa de nenhuma ferramenta de conversão para começar a trabalhar com o LESS. A sintaxe MENOS é retrocompatível com CSS . Isso significa que qualquer arquivo CSS também é um arquivo MENOS válido.
Simplesmente obtenha seu CSS e renomeie-o para um arquivo MENOS. Em seguida, use recursos específicos do LESS junto com suas alterações. Quanto mais você atualizar o arquivo, mais poderá usar os recursos MENOS.
Fiz o mesmo para o SCSS e um projeto muito grande com 10 arquivos CSS. Era quase impossível (e uma enorme perda de tempo) reescrever todo o CSS com o SCSS. Eu simplesmente o renomeei, e toda vez que eu estava trabalhando no arquivo CSS, executei uma pequena refatoração no código para tirar proveito de mixins, variáveis e assim por diante.
Você já olhou pelo menos? É muito melhor converter CSS do que Lessify. Em particular, o Lessify não otimiza suas aulas muito bem. Ele copiou as redefinições do navegador para todos os seus mixins gerados, criando atributos redundantes. É claro que ainda está na fase experimental. Nenhum dos utilitários pode determinar a semântica, portanto, não pode converter valores em expressões, vars ou mixins paramétricos.
Menos faz um trabalho melhor de otimização e parece ser mais funcional. Ele ainda lida com pseudoclasses para você:
Essas ferramentas são ideais para trabalhar com grandes arquivos CSS pré-existentes. Aqui estão as etapas que eu recomendo para converter CSS em LESS (certifique-se de manter uma cópia dos arquivos CSS originais):
Se você estiver trabalhando com vários arquivos CSS adicionais, mescle-os em um único arquivo CSS. Isso garante que tudo seja MENOS e otimizado juntos.
Execute o código CSS resultante por meio de um utilitário de limpeza de CSS online. Eu tive bons resultados com o cleancss: http://www.cleancss.com/ . Isso removerá qualquer marcação estranha e redundante que não possa ser capturada por um conversor LESS.
Remova o @Media e qualquer estilo redefinido no arquivo CSS. Eles podem criar problemas ou introduzir possíveis redundâncias. Provavelmente, é uma boa ideia manter as redefinições em um arquivo separado.
Cole o arquivo CSS resultante em Menos e assista a besta.
Reintroduza suas redefinições e @screen.
Agora que você terminou, analise cada um dos atributos, encontre bons candidatos para a refatoração e transforme-os em variáveis e expressões LESS. Os atributos de cor e fonte do CSS são os mais fáceis de fatorar, a pesquisa e a substituição globais simples funcionam bem. No final, você pode decidir se deseja dividir o arquivo único em arquivos lógicos menores. Você pode achar que o processo faz com que você reorganize seus arquivos de uma maneira diferente.
Eu não sou o autor de Menos, apenas alguém que procura uma ferramenta semelhante e decidiu contar ao mundo sobre isso.
@import
? Pensei que o LESS fosse capaz de analisar @import
declarações e consolidar todas as suas folhas de estilo em um único CSS quando seus arquivos LESS forem compilados. Parece que despejar todo o seu CSS organizado em uma única folha de estilo gigante para convertê-lo em LESS seria um passo atrás para a manutenção.
Acho que não há como um conversor saber o que você quer fazer com grande parte do código.
Por exemplo, ele não saberia necessariamente quais variáveis você deseja usar. Ou como gerar mixins ou funções.
Eu acho que com este você precisará fazê-lo manualmente.
Que tal pesquisar e substituir.
se você tem color:#ffffff
e deseja alterá-lo para@color
apenas pesquise color:#ffffff
ou color : #ffffff
substitua por @color
.
Eu geralmente não confio nessas ferramentas.
ou você pode escrever um script PHP realmente simples que lide com isso.
Atualização 1 :
Ou você pode usar o http://nex-3.com/posts/96-scss-sass-is-a-css-extension, que é semelhante a less e possui uma ferramenta de conversão.
Experimente este site: css2less.cc
Ele converte seu CSS em MENOS enquanto você digita.