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?
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?
Risposte:
In realtà ho trovato qualcosa ora: http://leafo.net/lessphp/lessify/
Fa una formulazione di base, ad esempio:
#header {
/* ... */
}
#header p {
/* ... */
}
a
#header {
/* ... */
p {
/* ... */
}
}
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.
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:
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):
Se stai lavorando con diversi file CSS additivi, uniscili in un singolo file CSS. Questo assicura che tutto sia LESSied e ottimizzato insieme.
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.
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.
Incolla il file CSS risultante in Almeno e guarda l'animale.
Reintroduci i tuoi ripristini e @screen.
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.
@import
? Pensavo che LESS fosse in grado di analizzare le @import
dichiarazioni 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à.
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.
Che ne dici di cercare e sostituire.
se lo hai color:#ffffff
e vuoi cambiarlo in@color
basta cercare color:#ffffff
o color : #ffffff
sostituire 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.
Prova questo sito: css2less.cc
Converte il tuo CSS in MENO durante la digitazione.