LESS.js - Il Linguaggio CSS Dinamico

LESS.js – Il Linguaggio CSS Dinamico

Oggi mi sento proprio bene! Siamo ad un passo dall'inaugurazione di HTML5 AndMore e sto anche per presentarvi un utilissimo script JavaScript che vi permetterà di scrivere i vostri CSS nella metà del tempo, come minimo!

Lo script JavaScript che prenderemo in analisi quest’oggi (e che vi era stato presentato precedentemente) si chiama LESS.js e, proprio come il nome suggerisce, vi permetterà di creare complessi file CSS utilizzando sempre meno codice. Grazie a LESS.js sarete in grado di creare variabili, funzioni (che nel gergo di LESS.js prendono il nome di Minix). eseguire calcoli matematici o anche inserire i selettoti all’interno dei suoi parenti per mantenere l’ereditabilità degli stessi.

Cosa?!? Non sapete cosa sia una variabile o una funzione? Mi sono spiegato male? Ho scritto con i piedi?!? Nessun problema! Nello scorrere di questa puntata, e nel video allegato, farò del mio meglio per essere il più chiaro possibile per permettervi di sfruttare le infinite potenzialità di questo ottimo script JS. Ma prima di tutto questo, credo che sia il caso di vedere come sia possibile implementare questo script all’interno delle vostre pagine!

Inseriamo LESS.js all’interno delle pagine HTML5

Questo è il codice necessario per iniziare ad utilizzare LESS.js all’interno dei vostri CSS. Due sono le cose importanti, per prima dovete essere sicuri che l’attributo rel sia così impostato: rel=”stylesheet/less” e non utilizzare rel=”stylesheet” come sarete probabilmente abituati ad usare; altra cosa importante è quella di creare un file con estenzione .less, sarà poi LESS.js incaricato alla compilazione di questo file e a servire il file CSS direttamente al browser.

Quasi dimenticavo! Mi raccomando, la chiamata al file less.js, dovrà essere effetuata soltanto dopo la dichiarazione del vostro style.less;infatti io stesso mi sono confuso in questo ed ho perso un sacco di tempo alla ricerca della soluzione!

Adesso che sapete come inserire LESS.js all’interno delle vostre pagine non vi resta che scaricarlo!

Partiamo con le Variabili!

Qui devo essere sincero con voi… Quando mi sono trovato a dover ricostruire la template di HTML5 and More non mi sono neanche preso la briga di impostare una sola variabile! Ed ho fatto veramente male! Ma a mia difesa posso dirvi che avevo un foglio di stile di appoggio quindi, a parte qualche modifica, praticamente è stato un copia/incolla. Ma questo non è assolutamente quello che farei se dovessi creare un sito da 0, e mi aspetto che anche voi facciate altrettanto!

Ma, alla fine, che cosa è una variabile?!? Una variabile può essere vista come un contenitore di valori ovvero sarete in grado di dare un nome ad un valore ed utilizzare quel nome all’interno del vostro CSS, molto più semplice di ricordarsi la definizione di un colore come #0036ff, non credete? Andiamo a vedere come si trasformeranno le regole impostate sopra quando LESS.js avrà compilato il CSS per voi…

Eccoci quà! Quando LESS.js avrà terminato la compilazione del nostro CSS, all’interno di esso non troveremo “codici strani” con @ a giro, ma bensì una traduzione di essi ai valori che vengono impostati. Quindi ogni volta che vi troverete ad impostare un colore per i vostri titoli, tutto quello che dovrete fare è richiamare la variabile @title-color e troverete LESS.js pronto a sostituirla con il valore che gli avete impostato precedentemente!

I Minix di LESS.js

Un minix non è altro che la possibilità di includere tutte le proprietà impostabili in una classe, all’interno di un altra classe senza ripetizione del codice stesso. Ma siccome spiegarlo a parole, mi risulta abbastanza difficile data l’astrazione di questa funzionalità, andiamo a vederci un bell’esempio!

Whoa!!!! Ma che roba è questa?!? Volete la risposta semplice? É un Minix! Quello che avete davanti agli occhi è una tra le caratteristiche che vi velocizzerà maggiormente nello sviluppo dei CSS. L’esempio che vi ho portato è una semplice dichiarazione box-shadow, proprietà che abbiamo visto insieme nella puntata Utilizziamo le Ombre CSS3, ma al posto di dover dichiarare nuovamente la regola per ogni vendor-prefix vi basterà dichiarare soltanto una volta per avere comilata la stessa proprietà per ogni browser! Vi state chiedendo come si usa? Per prima cosa il codice che è stato riportato sopra serve a dichiarare il Minix, in poche parole state dicendo a LESS.js come comportarsi quando trova una chiamata a questo minix all’interno dei vostri file. Una volta dichiarato un minix non vi resta che utilizzarlo come segue:

Una volta chiamato il minix, LESS.js sarà in grado, grazie alla dichiarazione precedente, di produrre il seguente codice:

In poche parole… con una semplice riga di codice avete appena creato una ombra che sarà compatibile con tutti i browser che supportano la proprietà box-shadow ma, come vedremo anche in altri articoli, i minix permettono di fare anche molto altro!

Eseguiamo calcoli matematici con LESS.js

Siamo giunti al momento in cui potrete buttare via le vostre calcolatrici, e lasciar lavorare i vostri CSS! Con LESS.js è infatti possibile creare delle vere e proprie funzioni matematiche che vi aiuteranno nella costruzione dei vostri template, o ad esempio anche nella creazione dei vostri titoli. Vediamo ad esempio come tutto questo sia possibile.

Ecco fatto che con l’utilizzo di due semplici variabili siamo stati in grado di creare ben quattro titoli e due box semplicemente con dei calcoli matematici. Infatti il codice sopra presentato sarà in grado di produrre:

Vorrei farvi soffermare un secondo ai due elementi box, notate quanto sia semplice creare un layout per i vostri progetti partendo semplicemente da una sola unità di misura? La creazione di griglie CSS diventerà semplicemente un gioco da ragazzi! Se ci fosse qualcuno che ancora non ha ben presente il concetto di griglia CSS, non allarmatevi! A breve pubblicheremo un articolo che vi permetterà di capire, creare e personalizzare questi utilissimi strumenti impiegati da tempo nella struttura dei layout!

Ereditarietà all’Ennesima Potenza

Chi di voi ha presente il concetto di ereditarietà? Penso chiunque tra voi che ha avuto l’opportunità di sviluppare un foglio di stile, un CSS, per un progetto personale oppure lavorativo avrà sicuramente ben chiaro cosa intendo con il seguente codice:

Cosa ho appena fatto? In poche parole, il selettore utilizzato va letto al contrario. Sto dicendo al browser che, di selezionare un link, un elemento a, contenuto all’interno di un titolo di primo livello, l’elemento h1, che a sua volta deve essere contenuto in un elemento con id impostato ad header. Una volta trovato questo elemento gli chiedo di impostare il colore del link ad un colore bianco e di togliere qualsiasi decorazione che potrebbe essere stata applicata all’elemento; i link hanno tendenzialmente una sottolineatura che verrà, appunto, tolta.

Tutti gli altri link che saranno presenti nelle nostre pagine HTML5 non verranno affetti da queste regole, e quindi potranno comportarsi come da default, ovvero un colore blu e sottolineati.

Grazie all’utilizzo di LESS.js avrete la possibilità di nidificare questi elementi in modo da salvare tempo prezioso! Ecco come scriverei con LESS.js, con qualche regola CSS in più, la regola presentata sopra:

Come potete notare ho utilizzato delle indentazioni per chiarire meglio il concetto e per aumentare la leggibilità del codice stesso, ma vediamo un cosa ci restituirà LESS.js una volta compilato questo codice:

Una volta che il nostro codice verrà compilato, LESS.js non farà altro che restituirci un perfetto file CSS senza il bisogno di ricordarsi per forza quale sia l’elemento contenitore, infatti grazie alle indentazioni, ed alle nuove dichiarazioni di ereditarietà sarà per noi sempre più facile creare queste strutture!

Conclusioni

L’introduzione, anche se mi peritavo a chiamarla tale vista la lunghezza di questa puntata, di LESS.js è giunta al termine! Spero che ci siano molti tra voi che desiderano apprendere sempre di più questa nuova libreria JS che vi permetterà di fare veramente molto ed in sempre meno tempo!

Se avete dei consigli o dei dubbi da pormi sentitevi liberi di utilizzare la sezione dei commenti qua sotto, li ho lasciati apposta! Vi aspetto tutti Venerdì 20 Maggio per uno scoppiettante regalo che ho deciso di fare a tutti i lettori di html5andmore.info!!

Lascia il tuo Pensiero

5 Responses to “LESS.js – Il Linguaggio CSS Dinamico”

  1. Barbara

    Bene, ho imparato cose nuove! ma una cosa non riesco proprio a sistemare! Ovvero caricare fogli.less nuovi nel tema bones. :/
    anche se richiamo il file style.less nella pagina e imposto importer dell’altro file .less in style.less… non lo vede

    Rispondi
    • Andrea

      Ciao Barbara, sei sicura che la i file .less siano tutti all’interno della stessa cartella? Perché è importante rispettare il percorso dei vari file per permettere il corretto incorporamento. Se si trovano nella stessa cartella l’importazione giusta è @import “nome-file” (senza .less).

      Rispondi
    • Andrea

      Ciao Simona,

      L’operatore & si utilizza per utilizzare lo stesso selettore CSS magari aggiungendo una pseudo classe o pseudo elemento. In poche parole è una scorciatoia perché invece di scrivere:
      p{
      color: black;
      }
      p:hover{
      color: red;
      }

      Ti basterà scrivere:
      p{
      color: black;
      &:hover{
      color: red;
      }
      }

      E tutto funzionerà allo stesso modo.

      Rispondi