LESS è un piccolo strumento straordinario che estende i CSS con l'aggiunta di variabili, mixin, operazioni e regole nidificate. Ciò significa che è possibile scrivere codice più snello molto rapidamente. E con il recente aumento di complesse proprietà CSS3, abbiamo alcuni esempi lampanti di codice che potrebbero sicuramente essere semplificati un po '.
Oggi daremo un'occhiata a come utilizzare la più recente implementazione JavaScript di LESS per semplificare la lunga marcatura CSS3. Una delle caratteristiche principali che vedremo che non ho visto discusso altrove è come trattare con più variabili nei mixin. È abbastanza semplice, ma può essere fonte di confusione se non l'hai mai provato.
Chiunque può utilizzare LESS.js
Quando ho guardato LESS per la prima volta, mi è sembrato un sacco di lavoro. C'erano tutti questi strani passaggi di compilazione e gli script di Ruby che alla fine sembravano voler aggiungere tempo al mio flusso di lavoro invece di ridurlo.
Fortunatamente, qualcuno ha capito che l'intero processo potrebbe essere molto più semplice con JavaScript. Quindi ora implementare LESS è facile come incollare due righe di codice nel tuo HTML e tutto si compila automaticamente nel browser! Vediamo come funziona.
Iniziare
Per assicurarti che il tuo codice LESS sia compilato correttamente, inserisci il seguente codice nella parte superiore del tuo codice HTML.
Si noti che il tipico rel = stylesheet? è diventato rel = stylesheet / di meno? e che abbiamo collegato a una versione ospitata da Google di LESS.js.
Il prossimo passo è creare un file style.less. Questo può essere chiamato come vuoi, ma assicurati che abbia l'estensione .less invece di .css come se fossi abituato.
Dichiarazione delle variabili
Di gran lunga una delle mie funzionalità preferite di LESS è che puoi usare le variabili proprio come faresti nella maggior parte dei principali linguaggi di programmazione. Ciò rende estremamente facile impostare stili globali che possono essere modificati in un'unica posizione piuttosto che ordinare il codice per trovare ogni istanza di quello stile.
Per vedere come questo si applica a livello pratico, impostiamo un paio di variabili di colore. Immagina che la nostra pagina web abbia un colore primario e uno secondario che viene utilizzato ripetutamente in tutto il progetto. Piuttosto che ricordare il codice del colore ogni volta, possiamo semplicemente impostarli in variabili.
Per impostare una variabile in MENO, usa il simbolo @:
Questo è tutto! Ora ogni volta che vogliamo utilizzare questi colori nel nostro design, utilizziamo semplicemente lo stesso CSS che facciamo sempre, ma inseriamo il nome della variabile al posto del codice colore.
Ora ogni volta che cambiamo il colore nella dichiarazione della variabile, la modifica verrà automaticamente applicata al resto del codice ovunque venga chiamata la variabile. Questo può sicuramente farti risparmiare un sacco di tempo quando inizi a modificare i tuoi progetti.
operazioni
Proprio come con JavaScript e qualsiasi altro linguaggio di programmazione a cui sei abituato, LESS ti consente di eseguire operazioni su variabili. Questo può farti risparmiare un sacco di matematica mentale a lungo termine.
Come esempio semplicistico, diciamo che volevi creare una scatola larga due volte quanto era alta. Si potrebbe dichiarare l'altezza in una variabile e quindi impostare un'altra variabile che è il doppio di quel numero.
Poi più avanti nel tuo codice useresti queste variabili per impostare l'altezza e la larghezza della tua scatola. Se dovessi tornare indietro e cambiare boxHeight a 400px, boxWidth verrebbe automaticamente impostato su 800px;
mixins
Ecco dove entrerà in gioco il CSS3. Per iniziare, diamo un'occhiata alla sintassi di base per una proprietà CSS3 casuale, ad esempio border-radius.
Come puoi vedere, il modo corrente per assicurarti che funzioni attraverso il maggior numero di browser è quello di includere tutte le varie versioni specifiche del browser. Sopra abbiamo usato border-radius insieme a -webkit-border-radius e -moz-border-radius.
Ogni volta che vogliamo implementare angoli arrotondati nel nostro CSS, dobbiamo elencare manualmente tutte queste versioni. Vedo il tuo cervello ticchettare e formulare una discussione su come si potrebbe semplicemente impostare questi stili in una classe, ma cosa succede se si desidera la flessibilità per modificare il raggio di confine su una base per elemento? L'impostazione di una classe CSS riutilizzabile è una buona soluzione, ma con LESS puoi portare molto più avanti questa idea.
MENO consente di impostare essenzialmente più variabili in una singola classe che può quindi essere incorporata altrove nel codice. Per configurare un mixin usando LESS, usa la seguente sintassi:
Il codice sopra imposta una variabile per il raggio e lo rende uguale a 12px, lo gira in tutte le versioni di border-radius, quindi memorizza tutte queste informazioni in una classe chiamata .roundedCorners.
Ora, quando vogliamo applicare gli angoli arrotondati a un oggetto, semplicemente lanciamo la classe.
Questo applicherà un angolo-raggio di 12px al nostro box div usando tutte le versioni proprietarie appropriate.
Ricorda che il raggio di 12px impostato nel mixin è semplicemente un valore predefinito che viene passato quando non vengono specificati parametri durante la chiamata. È possibile inserire alternativamente quella classe e impostare rapidamente il raggio del bordo su un numero diverso.
Questo codice utilizza ancora tutte le diverse versioni border-radius, ma si attiverà automaticamente a 20px come valore per il raggio. Ciò rende super veloce l'implementazione di iterazioni personalizzate di una proprietà CSS3. Andiamo più in profondità nella tana del coniglio e vediamo come farlo con proprietà più complicate.
Miscele multiple variabili
Il raggio di confine era un semplice esempio perché contiene solo un singolo valore con cui lavorare, ma per quanto riguarda le proprietà più complicate come box-shadow?
Come puoi vedere sopra, qui abbiamo bisogno di impostare quattro diverse variabili per uniformare le tre versioni. Può sembrare complicato, ma fortunatamente funziona fondamentalmente come in JavaScript. Per mantenere l'esempio semplice, utilizzeremo solo l'ombreggiatura di default per vedere come è fatto.
Qui impostiamo le variabili per gli offset orizzontali e verticali, nonché per il raggio di sfocatura e il colore dell'ombra. Si noti che questi valori sono tutti racchiusi in un singolo insieme di parentesi e separati da virgole. Quindi, all'interno delle parentesi, lo scriviamo con le variabili proprio come abbiamo fatto con i numeri sopra, senza virgole che separano i valori.
Diciamo che volevamo applicare angoli arrotondati, un'ombra di riquadro e una transizione a un elemento usando LESS e CSS. Il codice che utilizzi sarebbe simile al seguente:
Quindi l'implementazione di questi sarebbe simile al seguente codice.
Come puoi vedere, abbiamo applicato le variabili per l'altezza, la larghezza e il colore della scatola, quindi abbiamo implementato le classi arrotondate e boxShadow. Infine, abbiamo creato un evento di passaggio del mouse che ha trasformato il colore di sfondo dal colore primario al colore secondario.
Regole nidificate
L'esempio sopra può essere ulteriormente semplificato utilizzando la funzione di regole nidificate di LESS. Guarda come possiamo lanciare tutti gli stili della scatola nello stesso set di parentesi ed eliminare la necessità di digitare l'ID div ogni volta.
Come puoi vedere, tutti gli stili di collegamento, gli stili di collegamento e gli stili di paragrafo degli elementi del box sono contenuti nello stesso genitore.
compilazione
So cosa stai pensando, tutto va bene, ma posso davvero usarlo? Si carica più lentamente del CSS standard? Quali browser lo supportano?
Risulta che tutte queste e altre domande simili non contano davvero. L'idea alla base di LESS è di accelerare e semplificare solo il passaggio di sviluppo. Ciò significa che ciò che viene pubblicato sul tuo sito Web finale dovrebbe essere semplice vecchio CSS, non MENO.
Dopo aver finito di lavorare sul tuo sito, devi compilare il MENO in CSS usando il tuo browser. Per fare ciò, basta aprire il file HTML in un browser e visualizzare il codice sorgente CSS. Quello che vedrai, indipendentemente da ciò che hai effettivamente codificato, è una normale struttura CSS. Basta copiare e incollare questo come documento CSS e sei pronto per andare.
Compilando con LESS.app
Per rendere le cose ancora più semplici, è possibile automatizzare completamente il processo di compilazione utilizzando l'applicazione gratuita LESS.
Tutto quello che devi fare è trascinare nella cartella del progetto contenente i tuoi file LESS? questo è tutto! Non c'è un secondo passaggio. Mentre continui a modificare e salvare i tuoi file LESS, verrà generato automaticamente un nuovo file CSS.
Conclusione
Per riassumere, ora LESS può essere implementato con solo due righe di codice nel codice HTML e può cambiare drasticamente il modo in cui si scrive CSS. Trascorri qualche mese con LESS e creerai e modificerai i fogli di stile complessi più velocemente che mai.
Puoi usare MENO per creare variabili, eseguire operazioni su variabili, nidificare regole e creare complessi mixin per semplificare il tuo CSS3.
Lascia un commento qui sotto e facci sapere cosa ne pensi di LESS. Pensi che sia un grande strumento o una perdita di tempo? Vogliamo sapere!