Primi passi con Less.js

Lo sviluppo di applicazioni Web ci porta lungo molti percorsi, ma tutti questi percorsi hanno una cosa in comune: il codice HTML e codice CSS, che ci offre molte possibilità per far apparire le nostre applicazioni come vogliamo o come immaginiamo.
Quello che succede ora è che, poiché ogni persona ha il suo modo di sviluppo, molte volte i codici risultanti sono molto estesi o in qualche modo disordinati, questo fa sì che la manutenzione e le prestazioni ne risentano un po'. È qui che entrano in gioco le librerie e i pre-processori che ci aiutano a scrivere un codice leggermente più pulito ed efficiente, aiutando così anche il lavoro di squadra, poiché molte di queste librerie ci fanno scrivere codice migliore.
Less.jsNome Less.js nasce dalla combinazione delle parole CSS più snello, qualcosa di simile a CSS più sottile o ridotto, il che ci dà già un'idea di cosa farà questo pre-processore, che non è altro che aiutarci a scrivere meno codice CSS, migliorando così la leggibilità e le prestazioni delle nostre applicazioni e pagine web. È basato su JavaScript quindi possiamo utilizzarlo sia lato client, anche se questa pratica non è consigliata per la produzione, sia anche lato server grazie a npm e Node.js, quindi può diventare il plugin di alcuni Framework JavaScript che stiamo guidando in questo momento.
L'idea principale da adottare Less.js nel nostro ambiente di sviluppo, è quello di aiutare a soddisfare il principio ASCIUTTO, il che significa non ripeterci, e per raggiungere questo obiettivo Less.js incorpora funzioni, classi e variabili che ci consentono di scrivere codice molto più riutilizzabile di quello in cui scriveremmo CSS direttamente.
1- Abbiamo bisogno di un browser moderno in grado di interpretare gli esempi che tratteremo, può essere Google Chrome o Firefox Developer Edition.
2- Dobbiamo avere un editor di testo nello stile di Sublime Text o NotePad++ per poter scrivere più comodamente i nostri esempi.
3- Infine abbiamo bisogno delle autorizzazioni per installare elementi tramite console di comando e una connessione Internet per scaricare le risorse necessarie.
InstallazioneL'installazione di Less.js Può essere fatto in due modi, il primo direttamente a livello di client e il secondo in un ambiente server come Nodo.jsVediamo ciascuno di questi modi di seguito.
Questa forma di installazione è semplice come chiamare semplicemente il file che contiene la libreria Less.js, ed è semplicemente già incluso nel nostro ambiente. Per scaricare la libreria, non ci resta che andare su lesscss.org e scaricare l'ultima versione stabile.

INGRANDIRE

Una volta scaricato il file, possiamo fare un piccolo esempio che ci aiuterà a sapere se abbiamo il nostro ambiente pronto per lo sviluppo con Less.js, ecco perché dobbiamo eseguire i seguenti passaggi:
1- Creeremo una cartella e all'interno creeremo un file chiamato index.html, quindi troveremo il file meno.min.js dentro la cartella dist della versione di Less.js che abbiamo scaricato, inoltre creeremo un file chiamato stili.less, la struttura di quanto descritto dovrebbe assomigliare a quella che vediamo di seguito:

2- Quindi scriveremo il seguente codice qui sotto all'interno del nostro index.html in modo che abbiamo qualcosa che possiamo applicare il CSS e quindi controlla gli stili:

 Primi passi con Less.js La nostra intestazione Il contenuto Il nostro piè di pagina

Qui vediamo prima di tutto una struttura HTML di base, dove all'interno del corpo abbiamo messo un'etichetta intestazione, un'etichetta sezione e infine un'etichetta piè di pagina, questo ci dà tre elementi totalmente diversi a cui possiamo applicare stili CSS.
3- Ora dentro l'etichetta testa dal codice precedente incorporeremo il nostro file stili.less e dopo questa inclusione il file meno.js, a questo punto è molto importante sottolineare che meno.js sarà sempre incluso dopo i nostri file .meno che gli stili porteranno, ed è anche importante notare che i file .meno che includiamo deve avere l'attributo rel come segue: rel = "foglio di stile / meno" poiché senza questo il compilatore meno non sapranno che devono lavorare con quel file. Vediamo come apparirà il nostro tag head con il codice aggiuntivo da aggiungere al codice del passaggio precedente:

 Primi passi con Less.js 

4- Ora non ci resta che aggiungere alcuni stili CSS all'interno del file stili.less, il codice sotto quello che farà è differenziare le diverse etichette che creiamo con colori diversi:

 intestazione {colore: blu;} sezione {colore: grigio;} piè di pagina {colore: giallo;}

5- Se apriamo il nostro index.html con un browser vedremo come è cambiato lo stile, e se apriamo una console per sviluppatori vedremo i messaggi che stampa meno.js Per farci sapere che funziona, vediamo nell'immagine seguente come si presenta:

Possiamo anche fare un esercizio un po' più approfondito e possiamo aprire il codice sorgente del nostro esempio nel browser e vedere come less.js generato un codice CSS nel nostro documento che non includiamo:

Lato serverL'installazione lato client è molto utile durante lo sviluppo, poiché ci permette di fare una sorta di eseguire il debug in tempo reale, osservando così i cambiamenti del momento, tuttavia per un ambiente di produzione non è affatto raccomandato, in primo luogo stiamo perdendo tempo mentre Less.js genera i fogli di stile, e in secondo luogo perché carichiamo i nostri file .meno che possono essere copiati da altre persone. Ecco perché ora vedremo come lavorare con Less.js durante l'installazione del compilatore, per questo utilizzeremo il gestore di pacchetti npm.
Dobbiamo avere un'istanza di funzionale npm, ecco perché ti consigliamo di installare l'ultima versione di Nodo.js per il nostro sistema operativo.
Abbiamo anche bisogno di permessi sufficienti per poter installare pacchetti con npm, e per eseguire istruzioni a livello di console di comando, questo è molto importante soprattutto negli ambienti Linux sì Mac, in modo che in finestre i permessi sono più facili da elaborare a questo livello.
1- Da una console di comando dobbiamo eseguire la seguente istruzione con npm:

 npm install -g less

2- Il passaggio precedente ci ha fatto installare il compilatore Less.js, chiamata meno, questo quello che fa è che trasforma il nostro codice meno in codice CSS valido per l'uso in un browser, quindi lo testeremo, per questo creeremo un file chiamato esempio.less con il seguente codice all'interno:

 @color: blu; .highlight () {color: @color;} p {.highlight ();}

3- Una volta fatto quanto sopra, andiamo alla nostra console ed eseguiamo le seguenti istruzioni per generare un file .css dove riposerà il nostro codice compilato:

 lessc esempio.less> esempio.css

Nel nostro file risultante otterremo ciò che vediamo nell'immagine seguente:

Se vogliamo un risultato compresso o minimizzato basta aggiungere il -x parametro dopo aver chiamato meno come il seguente:

 lessc -x esempio.less> esempio.css

Cosa ci dà quanto segue css minimizzato di conseguenza:

Nell'ultimo esempio delle installazioni secondo il modo di utilizzo abbiamo visto che per apporre il colore su una semplice etichetta P facciamo diverse cose, in primo luogo definiamo una variabile colore con il @ modificatore, questo significa che possiamo chiamare colori o valori all'interno di variabili in tutto il nostro documento, quindi possiamo avere una variabile @Titolocolore e con questo sappiamo che ovunque vogliamo usare il colore del titolo facciamo solo quella chiamata.
Routine riutilizzabiliUn'altra cosa che abbiamo visto è che abbiamo creato una funzione chiamata .evidenziare () e dentro mettiamo un attributo CSS e il suo valore era la nostra variabile, questo è un altro esempio di come possiamo costruire routine riutilizzabili all'interno dei nostri stili, quindi in qualsiasi classe o attributo che vogliamo evidenziare qualcosa dobbiamo solo chiamare quella funzione come abbiamo fatto all'interno dell'elemento p nel esempio.
Così vediamo che l'importanza di Less.js è che ci aiuta a pensare di più a come fare di meno, e quindi risultare alla fine con un codice compresso, valido e di facile lettura, nell'esempio si sarebbe potuto dire che tanto è stato scritto per così poco CSS risultante, ma l'idea è che quando dobbiamo fare molti CSS, scriviamo di meno, quindi vediamo che Less.js si scopre quando creiamo fogli di stile di grandi dimensioni.
Con questo finiamo questo tutorial, abbiamo imparato a muovere i primi passi con Less.js, quindi ora abbiamo buoni strumenti per essere in grado di creare grandi applicazioni o pagine Web utilizzando la minor quantità di codice possibile.