Existe uma ferramenta que converte css em less.css?


21

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?


veja minhas edições abaixo.
— fatnjazzy

Você deve verificar a resposta de @Simone Carletti e talvez expandir o que realmente está pedindo um pouco. Pode não haver "conversão" real necessária, além de renomear seu arquivo.
— Su '

Interessante, mas estou pensando se vale a pena adicionar 33 KB de código JS (less.js) para reduzir o tamanho dos arquivos CSS.
— Marco Demaio 3/10

1
Não estou usando o compilador JavaScipt obviamente. E o tamanho do CSS não é a razão pela qual eu o uso. Manutenção é a razão. :)
— js-coder

Respostas:



15

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.


Isso traz um ponto realmente bom. Até agora, as respostas parecem estar focadas na parte "converter" da pergunta, fazer mixins etc., e não apenas se o arquivo atual pode ser usado em uma mudança para o fluxo de trabalho MENOS.
— Su '

6

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ê:

http://toki-woki.net/p/least/

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):

  1. 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.

  2. 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.

  3. 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.

  4. Cole o arquivo CSS resultante em Menos e assista a besta.

  5. Reintroduza suas redefinições e @screen.

  6. 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.


Esses conversores não entendem @import? Pensei que o LESS fosse capaz de analisar @importdeclaraçõ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.
— Lèse majesté

Eles existem, mas lembre-se de que essas ferramentas existem on-line, portanto você deve recortá-las e colá-las em um campo de texto para que não tenha acesso às suas folhas de estilo externas.
— Joel Rodgers

Ah, na verdade, não cliquei nos links. Eu assumi que eles eram ferramentas de desktop. Isso faz sentido então.
— Lèse majesté

5

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.


Acordado. Existe uma certa quantidade de inferência e conhecimento de sua intenção exigida aqui, para a qual os computadores simplesmente não são muito adequados. Você poderá automatizar algumas tarefas (veja o link em @dotweb) e talvez consolidar itens como valores de cores em uma única variável, mas provavelmente é sobre isso.
— Su '

Sim, mas a conversão de LESS para CSS é uma conversão de 1 para 1, então teoricamente existe algum algoritmo que pode criar código LESS otimizado a partir de CSS ... Alguém só precisa escrevê-lo.
— trusktr

Os mixins podem ser usados ​​de qualquer maneira, pois é fácil para o computador coletar e agrupar seletores e aninhá-los. Felizmente, esta é a parte mais tediosa da conversão e é computável (veja minha resposta). Independentemente disso, dada a natureza em cascata do CSS, ele pode renderizar de forma diferente do CSS original. Variáveis ​​e expressões são impossíveis. Os computadores não podem determinar intenção ou semântica. Como um computador pode descobrir que largura: 400 em CSS é na verdade largura: pagewidth / 2 em LESS? Seria possível para um conversor converter cores e fontes em variáveis.
— Joel Rodgers

@JoelRodgers, por que a natureza em cascata do CSS implica que "decompilers" serão bugs? (Obviamente, um descompilador pode ser buggy, mas, em princípio, não é difícil dizer se uma reordenação de termos mudará a semântica).
— 26412 Peter Taylor

Eu estou falando sobre declarações e atributos de classe. Você precisa declará-los exatamente na mesma ordem, caso contrário, terá resultados diferentes. Erro errado, eu quis dizer regras aninhadas em vez de mixins.
— Joel Rodgers

3

Que tal pesquisar e substituir.

se você tem color:#ffffffe deseja alterá-lo para@color

apenas pesquise color:#ffffffou color : #ffffffsubstitua 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.


Sim, eu já pensei sobre isso. Mas é um arquivo muito grande, por isso quero ter certeza de que esta será a maneira mais fácil. ;) Pense em mixins etc.

ou você pode escrever um script PHP realmente simples que lide com isso.
— fatnjazzy

1
Você não conseguirá encontrar uma ferramenta que converta confiavelmente CSS puro para usar LESS mixins.
— Alex

Você está certo. Variáveis ​​automáticas e mixagem não fazem sentido.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.