INTRODUZIONE LESSLESS extends CSS with dynamic behavior such asvariables, mixins, operations and functions.

Saverio M.

CHE COSA E’?

LESS CSS è una libreria che ci permette realizzare fogli di stile utilizzando una sintassi più simile a quella dei linguaggi di programmazione, offrendo non pochi vantaggi specie sul piano della manutenibilità del codice.

LA SUA FORZA …

CSS LESS

I LIMITI DEI CSS Con il supporto ai CSS nei browser, lo sviluppo di layout grafici e di

interfacce complesse ha subito una decisa evoluzione. Negli anni tante cose sono cambiate: si sono fatti strada nuovi

standard e il supporto da parte dei browser è notevolmente migliorato (almeno per alcuni ).

Ciò che non è quasi per nulla variato è il modo con cui i CSS

vengono scritti.

CSS

Linguaggio statico

Descrittivo e non compilato

Privo di qualsiasi tipo di logica di programmazione o dinamicità.

… SUPERARE QUESTI LIMITI #1

Less permette quindi di aggiungere funzionalità specifiche: Le variabili I mixins Operazioni matematiche Dichiarazioni nidificate.

VANTAGGIO di LESSNon è necessario imparare un nuovo linguaggio di programmazione o adottare una sintassi differente.

Le funzionalità vengono interpretate in parte grazie a poche dichiarazioni specifiche e in parte scrivendo il proprio codice in modo più strutturato, logico ed elegante.

… SUPERARE QUESTI LIMITI #2

Un file Less non può essere direttamente interpretato dai browser ma deve essere pre-processato per poter

ottenere il file .css finale. Esiste un compilatore specifico a riga di comando.

Non è necessario lanciare il compilatore tutte le volte che eseguite una modifica al file .less. Esiste infatti una opzione per eseguirlo in modalità interattiva.

COME SI INSTALLA

OSX / LINUX

Nel caso l'istruzione non venga riconosciuta o per chi lavora su Linux, è necessario provvedere prima all'installazione di Ruby e ruby-gem.

Ultima versione

COME SI COMPILA

Dopo aver creato un file layout.less

Nella stessa cartella del file .less troverete il file .css

Modalità interattiva (ogni volta che si modificherà il file .less verrà rigenerato il file .css)

ATTENZIONESe si genera un errore verràbloccata la modalità interattivae si dovrà riavviare!

CODING CON LESS #1

VARIABILI

=>

LESS CSS

CODING CON LESS #2

MIXINSpermettono di definire una serie di proprietà che possono essere richiamate all'interno delle dichiarazioni degli stili.

LESS CSS

=>

CODING CON LESS #3

DICHIARAZIONI NIDIFICATELess permette di velocizzare la scrittura di lunghe sequenze di selettori nidificando e raggruppando i percorsi attraverso l'uso delle parentesi:

LESSCSS

=>

CODING CON LESS #4

OPERAZIONIIl compilatore è in grado di riconoscere il tipo di valore che si sta manipolando e quindi applicare la corretta unità di misura.

LESSCSS

=>

CODING CON LESS #5

NAMESPACE e ACCESORSÈ possibile raggruppare una serie di mixins o variabili all'interno di una singola dichiarazione

LESSCSS

=>

CODING CON LESS #6

SCOPEQuando richiamiamo una variabile, il compilatore ricerca il suo valore prima a livello locale e, nel caso non fosse disponibile, a ritroso percorrendo i vari nodi padre.

IMPORTLess permette di importare sia altri file .less che normali file .css tramite l'istruzione @import. Per i file .less non è necessario specificare l'estensione.

GRAZIEContatti

Saverio M.@savez