• Like
Introduzione a Less
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Introduzione a Less

  • 409 views
Published

breve introduzione a LESS (dinamicità nei CSS) …

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
409
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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