Esiste uno strumento che converte css in less.css?


21

Ho un file CSS piuttosto grande, che voglio convertire in meno. Quando ho scritto il CSS non conoscevo less.css, ma ora voglio ancora usare il mio vecchio CSS.

Esiste uno strumento che può aiutarmi a convertirlo automaticamente?


vedere le mie modifiche qui sotto.
fatnjazzy,

Dovresti controllare la risposta di @Simone Carletti e forse espandere ciò che stai davvero chiedendo un po '. Potrebbe non essere necessaria una "conversione" effettiva, oltre a rinominare il file.
Su '

Interessante, ma mi chiedo se valga la pena aggiungere 33 KB di codice JS (less.js) per ridurre la dimensione dei file CSS.
Marco Demaio,

1
Non sto usando il compilatore JavaScipt ovviamente. E la dimensione del CSS non è il motivo per cui lo uso. La manutenzione è la ragione. :)
js-coder,

Risposte:



15

In realtà, non è necessario alcuno strumento di conversione per iniziare a lavorare con MENO. MENO la sintassi è retrocompatibile con CSS . Significa che qualsiasi file CSS è anche file LESS valido.

Ottieni semplicemente il tuo CSS e rinominalo in un file MENO. Quindi utilizzare le funzionalità specifiche MENO insieme alle modifiche. Più aggiornerai il file, più sarai in grado di usare MENO funzionalità.

Ho fatto lo stesso per SCSS e un progetto molto grande con 10 file CSS. Era quasi impossibile (e un'enorme perdita di tempo) riscrivere tutti i CSS con SCSS. L'ho semplicemente rinominato, quindi ogni volta che stavo lavorando sul file CSS, ho eseguito piccoli refactoring sul codice per sfruttare mixin, variabili e così via.


Questo fa apparire un ottimo punto. Le risposte finora sembrano concentrarsi sulla parte "convertita" della domanda, fare mixin, ecc. E non solo se il file corrente può essere utilizzato in un passaggio al flusso di lavoro MENO.
Su '

6

Hai guardato almeno? È molto meglio nel convertire CSS che Lessify. In particolare, Lessify non ottimizza molto bene le tue lezioni. Ha copiato il reset del browser su tutti i suoi mixin generati, creando attributi ridondanti. È chiaro che è ancora in fase sperimentale. Nessuna delle due utility può determinare la semantica, quindi non può convertire i valori in espressioni, var o mixin parametrici.

Almeno fa un lavoro migliore di ottimizzazione e sembra essere più funzionale. Gestisce anche pseudoclass per te:

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

Questi strumenti sono ideali per lavorare con file CSS preesistenti di grandi dimensioni. Ecco i passaggi che consiglio di convertire da CSS a LESS (assicurati di conservare una copia dei file CSS originali):

  1. Se stai lavorando con diversi file CSS additivi, uniscili in un singolo file CSS. Questo assicura che tutto sia LESSied e ottimizzato insieme.

  2. Esegui il codice CSS risultante tramite un'utilità di pulizia CSS online. Ho avuto buoni risultati con cleancss: http://www.cleancss.com/ . Ciò rimuoverà qualsiasi markup estraneo e ridondante che potrebbe non essere intercettato da un convertitore LESS.

  3. Rimuovi @Media e tutti i ripristini di stile presenti nel file CSS. Possono creare problemi o introdurre possibili licenziamenti. È probabilmente una buona idea conservare i ripristini in un file separato.

  4. Incolla il file CSS risultante in Almeno e guarda l'animale.

  5. Reintroduci i tuoi ripristini e @screen.

  6. Ora che hai finito, passa attraverso ciascuno degli attributi e trova buoni candidati per il refactoring e trasformali in MENO variabili ed espressioni. Gli attributi di colore e carattere CSS sono i più facili da considerare, la semplice ricerca globale e la sostituzione funzionano bene. Alla fine, puoi decidere se suddividere il singolo file in file logici più piccoli. È possibile che il processo ti riorganizzi i file in modo diverso.

Non sono l'autore di Least, solo qualcuno alla ricerca di uno strumento simile e ho deciso di parlarne al mondo.


Quei convertitori non capiscono @import? Pensavo che LESS fosse in grado di analizzare le @importdichiarazioni e consolidare tutti i fogli di stile in un singolo CSS quando i file LESS sono stati compilati. Sembra che scaricare tutti i tuoi CSS ben organizzati in un unico foglio di stile gigante per convertirlo in MENO sarebbe un passo indietro per la manutenibilità.
Lèse majesté,

Lo fanno, ma tieni presente che questi strumenti esistono online, quindi devi tagliarli e incollarli in un campo di testo in modo da non avere accesso ai tuoi fogli di stile esterni.
Joel Rodgers,

Ah, in realtà non ho fatto clic sui collegamenti. Pensavo fossero strumenti desktop. Questo ha senso allora.
Lèse majesté,

5

Non penso che ci sia modo per un convertitore di sapere cosa vuoi fare con gran parte del codice.

Ad esempio, non dovrebbe necessariamente sapere quali variabili si desidera utilizzare. O come generare mixin o funzioni.

Penso che con questo dovrai farlo manualmente.


Concordato. C'è una certa quantità di inferenza e conoscenza del tuo intento richiesto qui a cui i computer non sono molto adatti. Sarai in grado di automatizzare alcune attività (vedi il link da @dotweb) e forse consolidare cose come i valori di colore in una singola variabile, ma probabilmente è questo.
Su '

Sì, ma la conversione da LESS a CSS è una conversione da 1 a 1, quindi teoricamente esiste un algoritmo che può creare codice LESS ottimizzato da CSS ... Qualcuno deve solo scriverlo.
trusktr,

I mixin possono andare in entrambi i modi, poiché è facile per il computer raccogliere e raggruppare i selettori e nidificarli. Fortunatamente, questa è la parte più noiosa della conversione ed è calcolabile (vedi la mia risposta). Indipendentemente da ciò, data la natura a cascata del CSS, potrebbe essere reso diversamente dal CSS originale. Le variabili e le espressioni sono impossibili. I computer non possono determinare l'intento o la semantica. Come può un computer capire quella larghezza: 400 in CSS è in realtà larghezza: larghezza di pagina / 2 in MENO? Per un convertitore sarebbe possibile convertire colori e caratteri in variabili.
Joel Rodgers,

@JoelRodgers, perché la natura a cascata dei CSS implica che i "decompilatori" saranno corretti? (Ovviamente un decompilatore potrebbe essere difettoso, ma in linea di principio non è difficile dire se un riordino dei termini cambierà la semantica).
Peter Taylor,

Sto parlando di dichiarazioni e attributi di classe. Devi dichiararli nello stesso identico ordine, altrimenti otterrai risultati diversi. Brutto errore, intendevo Regole nidificate invece di mixin.
Joel Rodgers,

3

Che ne dici di cercare e sostituire.

se lo hai color:#ffffffe vuoi cambiarlo in@color

basta cercare color:#ffffffo color : #ffffffsostituire con @color.

Di solito non mi fido di questi strumenti.

oppure puoi scrivere uno script PHP davvero semplice che lo gestisca.

Aggiornamento 1 :
Oppure puoi utilizzare il http://nex-3.com/posts/96-scss-sass-is-a-css-extension che è simile a less e ha uno strumento di conversione.


Sì, ci ho già pensato. Ma è un file abbastanza grande, quindi voglio essere sicuro, questo sarà il modo più semplice. ;) Pensa ai mixin ecc.

oppure puoi scrivere uno script PHP davvero semplice che lo gestisca.
fatnjazzy,

1
Non sarai in grado di trovare uno strumento che converta in modo affidabile CSS puro nell'utilizzo di LESS mixin.
Alex

Hai ragione. Le variabili automatiche e il missaggio non hanno senso.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.