introduzione a less
Post on 13-Jun-2015
454 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related