Lavorare in modo efficace con i suggerimenti e gli strumenti di LESS

Nel nostro precedente tutorial, abbiamo imparato come usare LESS in modo pratico utilizzando applicazioni come ChrunchApp per compilare il codice. Questa volta forniremo alcuni consigli pratici che saranno in grado di migliorare le nostre prestazioni e produttività durante la compilazione della sintassi LESS. Configureremo il nostro ambiente desktop / di lavoro abilitando l'evidenziazione della sintassi per il nostro attuale editor, utilizzando strumenti di compilazione automatica e utilizzando Mixins predefiniti, quindi li sincronizzeremo tutti insieme.

Bene, se sei pronto, iniziamo.

Disclaimer: I suggerimenti spiegati di seguito derivano dalle mie esperienze quotidiane come web designer. Quindi, prima di approfondire ulteriormente, voglio sottolineare che i suggerimenti potrebbero essere adatti ad alcuni designer e non ad altri; proprio come qualsiasi altro suggerimento che trovi sul Web. Nondimeno, spero che tu possa raccogliere qualcosa di utile dai seguenti suggerimenti.

1. Evidenziatore di codice

Come accennato in precedenza, ti abbiamo presentato ChrunchApp. Tuttavia, questa app potrebbe non essere la preferenza di ogni web designer; perché ogni designer ha il proprio ambiente di lavoro, incluso l'editor di codice di propria scelta.

Piuttosto che installare un altro editor di codice, puoi ancora utilizzare quello attuale e abilitare l'evidenziazione della sintassi al suo interno. Quindi, in questo post, condividerò alcuni suggerimenti per aggiungere l'evidenziazione del codice LESS in 2 famosi editor di testo: Testo sublime 2 e Bloc notes++.

Testo sublime 2

Questo editor è attualmente la mia scelta preferita per aiutarmi a comporre i codici. Questa app è disponibile per Windows, Linux e OSX, quindi qualunque sia il tuo sistema operativo, sarai comunque in grado di seguire questo consiglio.

Ora scarichiamolo dal suo sito web ufficiale e proviamo questo editor. Quindi, leggi le seguenti istruzioni per abilitare l'evidenziazione del colore MENO in essa.

Nota: Assicurati di aver letto la licenza prima di scaricare, poiché la versione gratuita è destinata esclusivamente alla valutazione.

Installa la console del pacchetto

Innanzitutto, apri il tuo Sublime Text 2 e mostra la Console da questo menu Visualizza> Mostra console

Quindi, copia e incolla la seguente riga di comando nella Console, quindi premi Invio per installare il controllo pacchetto da wBond.net:

importa urllib2, os; pf = "Pacchetto Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) se non os.path.exists (ipp) else Nessuno; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); aperta (os.path.join (IPP, pf), 'wb') .write (urllib2.urlopen ( 'http://sublime.wbond.net/'+pf.replace (", '% 20')). read ()); print 'Please restart Sublime Text to finish installation'

Questo Console dei pacchetti ci aiuterà a installare il pacchetto highlight.

Installazione del pacchetto di evidenziazione di MENO

Riavvia il Sublime Text 2 e mostra Command Palette da questo menu Strumenti> Palette comandi. Attendere fino a quando l'elenco dei pacchetti non è stato caricato. Quindi, digita Installa pacchetto per cercare e caricare i repository dei pacchetti.

Quindi, cerca il pacchetto LESS dall'elenco degli archivi e premi Invio.

Attendere un minuto che Sublime Text 2 scarichi e installi il pacchetto fino alla visualizzazione della seguente notifica sulla barra di stato.

Vai al menu Visualizza> Sintassi, dovresti vedere MENO sulla lista. Significa che il Sublime Text 2 supporta .Di meno e la sintassi di LESS dovrebbe anche avere un'evidenziazione del colore corretta ora.

Bloc notes++

Notepad ++ è un editor di codice gratuito, open source, e ha molti plugin utili per estenderne le funzionalità. È anche ampiamente utilizzato da molti web designer / sviluppatori, in particolare quelli che lavorano con il sistema operativo Windows. Quindi, decido di includere anche la tip per aggiungere MENO evidenziazione del testo per questo.

Installa l'evidenziazione MENO nel Blocco note++

Abilitare l'evidenziazione del colore MENO in Notepad ++ è abbastanza semplice.

Per prima cosa scarica il pacchetto LESS per Notepad ++ da questo link (userDefineLang_LESS.xml). Quindi, vai a Visualizza> Dialogo definito dall'utente.

Apparirà la seguente finestra di pop-up qui sotto. Clicca il Importare… pulsante e individuare il tuo scaricato .xml file. Quindi, riavvia il blocco note++.

Apri il tuo file .less e vai al menu Lingua. Ora dovresti vedere MENO incluso. Selezionalo per applicare l'evidenziazione dei colori sulla sintassi LESS.

Altre risorse

Ci sono molti altri editor sul mercato. Quindi, qui includiamo alcuni link utili per te se non usi nessuno degli editor di cui sopra.

Adobe DreamWeaver

Indubbiamente, Dreamweaver ha una vasta base di utenti. È disponibile sia per Mac che per Windows. Quindi, se si utilizza questo editor, ecco una buona fonte per installare l'evidenziazione LESS in Adobe DreamWeaver.

Coda

Se usi Mac probabilmente conosci Coda, questo editor è uno dei più popolari tra gli utenti Mac. Ed ecco come installare LESS in Coda.

Geany

È uno degli editor di codice più popolari tra gli utenti di Linux. Anche alcuni computer nel mio ufficio che funzionano su Linux usano Geany. Quindi, se lo usi anche tu, puoi includere l'evidenziazione MENO seguendo queste istruzioni su SuperUser.com

2. MENO compilatore

A differenza di ChrunchApp che ha un compilatore LESS incorporato, gli altri editor non lo avranno per impostazione predefinita. Sebbene ci siano alcuni modi per includerlo, ma è piuttosto tecnico per gli utenti generici. Quindi la soluzione migliore che ho è di fare la compilazione usando i seguenti strumenti: senza vittorie o LESS.app. WinLESS è un compilatore progettato per Windows, mentre il LESS.app è costruito per OSX.

Questi strumenti possono convertire automaticamente il nostro codice LESS in un CSS statico mentre salviamo il file e segnaliamo direttamente se c'è un errore nel codice. Bene, lascia che ti mostri quanto sia maneggevole questo strumento:

Innanzitutto, vorrei scaricare WinLESS e installarlo.

Fai clic sul pulsante Aggiungi cartella e individua la directory in cui inserisci il tuo .Di meno file (presumo tu abbia già creato almeno uno). Una volta che ne aggiungi uno; WinLESS esegue la scansione e trova tutto .Di meno file e mostrarti sulla lista.

Vai al menu File> Impostazione, e assicurarsi che queste opzioni siano controllate;

• Compila automaticamente i file quando salvati
• Mostra messaggio su compilazione riuscita

Possiamo anche impostare la cartella di output, nel caso in cui vogliamo salvarla altrove. Ma, in questo esempio, lasceremo questa opzione così com'è; il che significa che il file di output verrà salvato nella stessa directory di .Di meno file.

Apri i tuoi .Di meno file dalla directory aggiunta, apportare alcune modifiche e salvarlo.

Il WinLESS ti avviserà quando il file è stato compilato correttamente .css o se c'è un errore nei codici. In questo modo puoi controllare direttamente l'output .css, piuttosto che dover aspettare che i codici vengano compilati per compilarlo.

Se si utilizza Mac, è possibile utilizzare LESS.app che ha la stessa funzionalità di WinLESS.

Preset Mixins

Nelle attuali pratiche di progettazione Web moderne, utilizzeremo proprietà CSS3 come Gradient, Shadow o Border Radius che assomigliano a questo:

-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;

o

background: -moz-linear-gradient (in alto, # f0f9ff 0%, # a1dbff 100%); background: -webkit-linear-gradient (in alto, # f0f9ff 0%, # a1dbff 100%); background: -o-linear-gradient (in alto, # f0f9ff 0%, # a1dbff 100%); background: -ms-linear-gradient (in alto, # f0f9ff 0%, # a1dbff 100%); sfondo: gradiente lineare (in alto, # f0f9ff 0%, # a1dbff 100%);

Nel nostro tutorial precedente abbiamo creato alcuni Mixin per semplificare questa sintassi. Fortunatamente, alcune persone nella comunità del web design sono davvero abbastanza generose da risparmiare tempo per compilare questi utili Mixin, così da non doverli compilare da zero.

E, uno dei miei preferiti è Less Elements che contiene molte regole predefinite CSS3 utili. Quindi, ora scriviamo meno righe di codice dai noiosi prefissi dei fornitori.

Bene, ora, vediamo come tutti questi suggerimenti sopra possono davvero aiutare.

Mettendoli tutti insieme

In questo esempio creerò un semplice pulsante di collegamento. Per prima cosa vorrei creare un nuovo documento HTML e inserire il seguente mark-up:

     Cliccami 

Creare un styles.less come il nostro foglio di stile LESS principale, salvarlo nella stessa cartella con il nostro documento HTML e aggiungere la cartella a WinLESS.

Importa il elements.less abbiamo scaricato prima di utilizzare questa sintassi:

@import "elements.less";

Ora, possiamo usare qualsiasi Mixin fornito da elements.less come .pendenza, .arrotondato, e .delimitato. Sono sicuro che il nome Mixins è abbastanza auto-esplicativo.

Quindi, inserisci le regole LESS di seguito, nel tuo foglio di stile. E, salvalo ancora una volta

 a display: inline-block; imbottitura: 10px 20px; colore: # 555; decorazione del testo: nessuna; .bw-gradient (#eee, 240, 255); .rounded; .bordered; &: hover .bw-gradient (#eee, 255, 240);  

Dal nostro .Di meno il file è stato aggiunto a WinLESS, verrà automaticamente compilato .css. Ora vediamo i risultati.

Beh, non è così male, non è vero, considerando che questo pulsante è stato creato con meno linee di quello che era necessario. E, ecco il CSS statico generato attuale:

 a display: inline-block; imbottitura: 10px 20px; colore: # 555; decorazione del testo: nessuna; sfondo: #eeeeee; background: -webkit-gradient (lineare, left bottom, left top, color-stop (0, # f0f0f0), color-stop (1, #ffffff)); sfondo: -ms-linear-gradient (in basso, # f0f0f0 0%, # f0f0f0 100%); background: -moz-linear-gradient (centro in basso, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; sfondo-clip: padding-box; border-top: solido 1px #eeeeee; border-left: solid 1px #eeeeee; border-right: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee;  a: hover background: #eeeeee; background: -webkit-gradient (lineare, a sinistra in basso, a sinistra in alto, color-stop (0, #ffffff), color-stop (1, # f0f0f0)); sfondo: -ms-linear-gradient (in basso, #ffffff 0%, #ffffff 100%); background: -moz-linear-gradient (centro in basso, #ffffff 0%, # f0f0f0 100%); 

In sintesi

Ecco un breve riassunto di ciò che abbiamo discusso in questo post:

• Abilitando l'evidenziazione della sintassi nel nostro editor corrente, non è necessario installare un editor aggiuntivo solo per comporre la sintassi LESS; questo può farti risparmiare spazio / memoria sul tuo disco.
• Inoltre, non è più necessario scaricare e collegare la libreria LESS.js alla nostra sezione head HTML come abbiamo fatto nel nostro ultimo tutorial. In questo modo, il nostro documento HTML rimane pulito e ordinato.
• Utilizzando strumenti di compilazione come WinLESS e LESS.app puoi generare immediatamente l'output statico CSS. Quindi, se c'è qualcosa di sbagliato nella sintassi, possiamo esaminarlo subito.
• Mixet predefiniti come LESS Elements è il nostro migliore amico. Può davvero risparmiare tempo quando si compila la noiosa proprietà CSS3.

.