Your SlideShare is downloading. ×
0
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Introduzione a Less
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduzione a Less

426

Published on

breve introduzione a LESS (dinamicità nei CSS) …

breve introduzione a LESS (dinamicità nei CSS)
www.lesscss.org

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
426
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. INTRODUZIONELESSLESS extends CSS with dynamic behavior suchasvariables, mixins, operations and functions. Saverio M.
  • 2. CHE COSA E’?LESS CSS è una libreria che ci permette realizzare fogli di stileutilizzando una sintassi più simile a quella dei linguaggi diprogrammazione, offrendo non pochi vantaggi specie sul piano dellamanutenibilità del codice.
  • 3. LA SUA FORZA … CSS LESS
  • 4. 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.CSSLinguaggio staticoDescrittivo e non compilatoPrivo di qualsiasi tipo di logica di programmazione o dinamicità.
  • 5. … SUPERARE QUESTI LIMITI #1Less permette quindi di aggiungere funzionalità specifiche: Le variabili I mixins Operazioni matematiche Dichiarazioni nidificate.VANTAGGIO di LESSNon è necessario imparare un nuovo linguaggio di programmazione oadottare una sintassi differente.Le funzionalità vengono interpretate in parte grazie a poche dichiarazionispecifiche e in parte scrivendo il proprio codice in modo più strutturato,logico ed elegante.
  • 6. … 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.
  • 7. COME SI INSTALLA OSX / LINUXNel caso listruzione non venga riconosciuta o per chi lavora su Linux, ènecessario provvedere prima allinstallazione di Ruby e ruby-gem. Ultima versione
  • 8. 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) ATTENZIONE Se si genera un errore verrà bloccata la modalità interattiva e si dovrà riavviare!
  • 9. CODING CON LESS #1 VARIABILI =>LESS CSS
  • 10. CODING CON LESS #2 MIXINSpermettono di definire una serie di proprietà che possono essere richiamateallinterno delle dichiarazioni degli stili. =>LESS CSS
  • 11. CODING CON LESS #3 DICHIARAZIONI NIDIFICATELess permette di velocizzare la scrittura di lunghe sequenze di selettorinidificando e raggruppando i percorsi attraverso luso delle parentesi: =>LESS CSS
  • 12. CODING CON LESS #4 OPERAZIONIIl compilatore è in grado di riconoscere il tipo di valore che si stamanipolando e quindi applicare la corretta unità di misura. =>LESS CSS
  • 13. CODING CON LESS #5 NAMESPACE e ACCESORSÈ possibile raggruppare una serie di mixins o variabili allinterno di unasingola dichiarazione =>LESS CSS
  • 14. CODING CON LESS #6 SCOPEQuando richiamiamo una variabile, il compilatore ricerca il suo valore primaa livello locale e, nel caso non fosse disponibile, a ritroso percorrendo i varinodi padre. IMPORTLess permette di importare sia altri file .less che normali file .css tramitelistruzione @import. Per i file .less non è necessario specificarelestensione.
  • 15. ContattiSaverio M.@savez

×