Your SlideShare is downloading. ×
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
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

HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo

1,724
views

Published on

Talk di Salvatore Rome per il meeting di HTML5 Italy. …

Talk di Salvatore Rome per il meeting di HTML5 Italy.
Se vi capita di avere fogli di stile disorganizzati, di usare il copia-incolla per ridefinire delle regole CSS, di dover cambiare un colore o un valore con Trova&Sostituisci... LESS è la soluzione.
Scopriremo l'uso delle variabili per definire i colori e le dimensioni principali, i mixin per creare regole complesse e riutilizzarle (come effetti ombra o animazioni), le nested rules per ordinare il codice e le funzioni per i colori.
Inoltre vedremo come sottolineare gli errori di sintassi e come automatizzare la compilazione in file CSS.
Dopo questo tutorial non vorrete più tornare ai CSS!

Published in: Technology

1 Comment
11 Likes
Statistics
Notes
  • LessCss online converter!
    http://labs.easyblog.it/lesscss/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,724
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
11
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
  • Parleremo di una tecnica che vi aiuterà nello sviluppo e nella manutenibilità dei vostri fogli di stile
  • Se vi prometto che in 15 minuti rivoluziono il vostro modo di scrivere i fogli di stile per sempre mi credete? Facciamo un scommessa
  • Compilando un file LESS viene generato un file CSS pronto per essere embeddato nella vostra pagina HTML
  • Compilando un file LESS viene generato un file CSS pronto per essere embeddato nella vostra pagina HTML
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Una bella RDP (rottura di scatole)
  • Riconoscete questa regola? Si tratta di una regola per aggiungere un’ombra ad un elemento.Se usate i CSS vi ritroverete spesso a fare Copia&Incolla per definire ombre, ma più in generale per replicare i prefissi di ogni browser per diverse regole
  • LESS introduce i mixin. In pratica voi definite delle regole CSS di uso comune, come shadow in questo caso, e potete riutilizzarle in altre regole CSS.Per chi di voi ha più dimestichezza con i CSS, c’è una tecnica, nota come OOCSS, che vi permette comunque di ovviare a questo problema, aggiungendo ad esempio la classe «shadow» ad un elemento. Tuttavia andiamo a vedere un caso più complesso
  • LESS introduce i mixin parametrici: potete definire dei parametri con dei valori di default. In questo modo non dovrete veramente più usare il copia/incolla.Per chi di voi ha qualche base di programmazione, i mixin parametrici sono come delle funzioni. I parametri si definiscono e si usano come le variabili. Vengono richiamati come se fossero una funzione. A qualcuno di voi non è chiaro?
  • Potete utilizzarli per evitare di ripetere i prefissi dei browser, ma anche in molte altre occasioni, come per definire delle regole ed estenderle successivamente.Esistono anche i mixincondizionali: sitratta di caratterizzareilmixin in base ad un intervallo di valori di qualcheparametro. Ad esempiomagarivoglio la distanzadei pixel di un’ombrasiamaggiore se la trasparenza è maggiore. Si usa la clausola when, ma non vi dico I dettagli: se vi serve sappiatecheesistequestapossibilità e sulsito lesscss.org vi spiega come farlo.
  • Raccomandazione: non utilizzatelo
  • Raccomandazione: non utilizzatelo
  • Raccomandazione: non utilizzatelo
  • Ad esempio conoscete i data-url? tempo fa abbiamo avuto la necessità di inglobare le immagini minori di 1kB come data-url al fine di ridurre il numero di richieste al server.
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • In questo talk ho deciso di parlarvi di LESS perché didatticamente è il linguaggio più semplice da spiegare. Esistono però diverse alternative a LESS. In particolare
  • Transcript

    • 1. Mai più CSSfogli di stile moderni con LESS #odioicss @romeosalv
    • 2. Chi sono Salvatore RomeoFounder + Front-End Engineer presso
    • 3. Domande ?Interrompete in qualsiasi momentoInviate un tweet con l’hashtag #odioicss
    • 4. Di cosa parleremoQuanto tempo si perde con i CSSLESS: la soluzioneDiventare esperto in 15 minuti Impariamo il linguaggio LESSEsempio praticoAmbiente di sviluppoCompilare LESS in CSS L’ambiente di lavoroAmbiente di debugAlternative a LESS: SASS
    • 5. Warning: odierete i CSSLa cosa che uno sviluppatore odia di più: Copia/Incolla Trova/SostituisciSe imparate LESS non vorrete più tornare indietro.
    • 6. Warning: odierete i CSS Effetto collateraleOdierete i CSS a tal punto che se ve ne passano uno lo riscriverete in LESS.
    • 7. Esperti di LESS in 15 minuti
    • 8. Esperti di LESS in 15 minutiCSS = LESS stessa sintassi, stessa semantica
    • 9. Esperti di LESS in 15 minutiCSS = LESS stessa sintassi, stessa semanticaLESS = CSS + estensioni
    • 10. Esperti di LESS in 15 minutiCSS = LESS stessa sintassi, stessa semanticaLESS = CSS + estensioniLe estensioni LESS: • Variabili • Mixin • Regole annidate (Nested Rules) • Operazioni • Funzioni • Import
    • 11. LESS: un CSS pre- processorLESS è un CSS pre-processor LESS CSS (minified)
    • 12. LESS: un CSS pre- processorLESS è un CSS pre-processor LESS CSS (minified)Introdurremo LESS partendo da ciò che è noioso (RDP) con
    • 13. Variabili Mixin Regole annidate Operazioni Funzioni Import
    • 14. RDP#1: Trova&Sostituisci
    • 15. RDP#1: Trova&Sostituisci
    • 16. RDP#1: Trova&Sostituisci
    • 17. RDP#1: Trova&Sostituisci
    • 18. RDP#1: Trova&Sostituisci
    • 19. RDP#1: Trova&Sostituisci COLORE-PRINCIPALE: blue
    • 20. RDP#1: Trova&Sostituisci COLORE-PRINCIPALE: blue
    • 21. RDP#1: Trova&Sostituisci COLORE-PRINCIPALE: blue COLORE-PRINCIPALE; COLORE-PRINCIPALE; COLORE-PRINCIPALE;
    • 22. RDP#1: Trova&Sostituisci
    • 23. RDP#1: Trova&Sostituisci
    • 24. RDP#1: Trova&Sostituisci
    • 25. RDP#1: Trova&SostituisciVariabili• Per specificare i parametri in un unico punto del file• Per cambiare il valore di un parametro agendo su una sola riga di codice• Si definiscono facendo precedere il simbolo @ al nome• Funzionano con: o i colori: @var1: #FF0000; @c2: rgb(100, 100, 70); ... o le dimensioni: @size1: 200px; @size2: 1em; ... o le stringhe: @string1: ‘‘LESS è fantastico’’;
    • 26. Variabili Mixin Regole annidate Operazioni Funzioni Import
    • 27. RDP#2: Copia&Incolla
    • 28. RDP#2: Copia&Incolla
    • 29. RDP#2: Copia&Incolla
    • 30. RDP#2: Copia&Incolla
    • 31. RDP#2: Copia&Incolla
    • 32. RDP#2: Copia&Incolla
    • 33. RDP#2: Copia&IncollaMixin• Per definire un gruppo di proprietà e riutilizzarle in seguito• I mixin parametrici sono funzioni per specializzare un mixin• Si definiscono come una classe• Per i parametri la sintassi è: .class (@param1: value, @param2: value) {...} dove i parametri funzionano come variabili.• Esempi: .rounded-corners (@radius: 5px){ … }
    • 34. Variabili Mixin Regole annidate Operazioni Funzioni Import
    • 35. RDP#3: disordine
    • 36. RDP#3: disordine
    • 37. RDP#3: disordine
    • 38. RDP#3: disordine
    • 39. RDP#3: disordine
    • 40. RDP#3: disordine
    • 41. RDP#3: disordineRegole annidate (nested rules)• Permettono di definire regole di ereditarietà tra gli elementi• C’è una corrispondenza diretta tra l’annidamento nel file HTML e l’annidamento nel file LESS• La sintassi: .element1{ .element2{ } &:active{ ... } }
    • 42. Variabili Mixin Regole annidate Operazioni Funzioni Import
    • 43. RDP#4: matematica
    • 44. RDP#4: matematica
    • 45. RDP#4: matematicaOperazioni• Permettono di definire valori tramite operatori matematici• Si possono applicare sui valori o di dimensione (100px * 3, @size + 10px, ...) o di colore (#842210 + @color1, #333 + #555, #111 * 3)• Si possono usare le parentesi: (@size * 0.5) + 10px• Possibili usi: o Definizione di parametri all’inizio o Temi
    • 46. Variabili Mixin Regole annidate Operazioni Funzioni Import
    • 47. RDP#5: color picker
    • 48. RDP#5: color picker
    • 49. RDP#5: color pickerFunzioni• Permettono di modificare in maniera intuitiva coloriCreazione di colori:hsla(@hue, @saturation, @lightness, @alpha) hslhsva(@hue, @saturation, @value, @alpha) hsvFiltri su un canale:hue(@color) saturation(@color) lightness(@color)red(@color) green(@color) blue(@color)alpha(@color)Operazioni sui colori:saturate desaturate lighten darkenfadein fadeout fademix greyscalemultiply screen overlay softlight hardlight difference average
    • 50. RDP#5: color pickerFunzioni• Permettono di modificare in maniera intuitiva valoriceil(@number)floor(@number)round(@number)percentage(@number)unit(@dimension, [@unit: ""])color(@string)
    • 51. Variabili Mixin Regole annidate Operazioni Funzioni Import
    • 52. RDP#6: tutto nello stesso file@import url (“style.css");L’import nei file CSS ha un problema: Occorre un’ulteriore richiesta al server
    • 53. RDP#6: tutto nello stesso file@import url (“style.css");L’import nei file CSS ha un problema: Occorre un’ulteriore richiesta al serverImport in LESS:• Non sono necessarie ulteriori richieste• Sintassi: @import "lib.less";• Per importare un file senza includerlo, si usa l’istruzione @import-once "lib.less";
    • 54. Variabili Mixin Regole annidate Operazioni Funzioni Import BONUS
    • 55. Bonus: LESS Media Queries
    • 56. Bonus: LESS Media Queries
    • 57. Tutto quiVariabili Mixin Regole annidate Operazioni Funzioni ImportUlteriori approfondimenti sono disponibili sul sito webufficiale: http://lesscss.org
    • 58. Esempi
    • 59. Un esempio: dry con i mixin
    • 60. Un esempio: nested rules
    • 61. Un esempio: variabili
    • 62. Un esempio: funzioni
    • 63. Un esempio: ombre
    • 64. Un esempio: glow
    • 65. Un esempio: gradienti
    • 66. Un esempio: rounded corners
    • 67. Un esempio: testo
    • 68. Un esempio:trasformazioni
    • 69. Un esempio: animazioni
    • 70. Definire una color palette
    • 71. Definire una color palette
    • 72. Definire una color palette
    • 73. Un esempio completo by Joshua Johnson http://goo.gl/03tl3
    • 74. Ambiente di lavoro
    • 75. Ambiente di sviluppoRaccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4)
    • 76. Ambiente di sviluppoRaccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Colorazione sintassi
    • 77. Ambiente di sviluppoRaccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Navigazione struttura
    • 78. Ambiente di sviluppoRaccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Auto- completamento
    • 79. Ambiente di sviluppoRaccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Evidenziazione errori e warning
    • 80. Ambiente di sviluppoRaccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Link alle definizioni di variabili e mixin
    • 81. Compilare LESS in CSS1)Lato client con less.js:
    • 82. Compilare LESS in CSS1)Lato client con less.js:Pro:• Veloce per iniziareContro:• Far scaricare al client un file in più• Compilazione del file in .css prima di renderizzare la pagina
    • 83. Compilare LESS in CSS1)Lato client con less.js:Pro:• Veloce per iniziareContro:• Far scaricare al client un file in più• Compilazione del file in .css prima di renderizzare la pagina
    • 84. Compilare LESS in CSS2) In automatico premendo SAVE: LESS CSS (minified)
    • 85. Compilare LESS in CSS2) In automatico premendo SAVE: LESS CSS http://wearekiss.com/simpless (minified)
    • 86. Compilare LESS in CSS2) In automatico premendo SAVE: LESS CSS http://wearekiss.com/simpless (minified)Pro:• Non vi dovete preoccupare di niente• Esiste l’opzione per la minificationContro:
    • 87. Compilare LESS in CSS3) Server side:
    • 88. Compilare LESS in CSS3) Server side:Pro:• Potete definire i file .less dinamicamente (es. per temi)• Potete fornire ad ogni client un file css personalizzatoContro:• Occorre importare una libreria nel vostro sistema• Overhead se non viene implementato un meccanismo di cache
    • 89. Ambiente di debug
    • 90. Ambiente di debug
    • 91. Ambiente di debug
    • 92. Ambiente di debug
    • 93. Ambiente di debughttp://goo.gl/rJHWq
    • 94. Alternative
    • 95. Alternative a LESSSass, Stylus, Turbine, Switch CSS, CSS Cacheer, CSS Preprocessor, DT CSS, CSS PP
    • 96. Alternative a LESSSass, Stylus, Turbine, Switch CSS, CSS Cacheer, CSS Preprocessor, DT CSS, CSS PP Sembra che ognuno si stia facendo il suo pre- processor!
    • 97. LA valida alternativa a LESS
    • 98. Sass• La sintassi è simile a LESS: Si usa il $ al posto della @ per definire le variabili $var anziché @var
    • 99. Sass• La sintassi è simile a LESS: Si usa il $ al posto della @ per definire le variabili $var anziché @var• Per definire i mixin si antepone @mixin: @mixin .shadow { ... }• Per usarli si antepone @include: .class{ @include .shadow; }
    • 100. Sass• La sintassi è simile a LESS: Si usa il $ al posto della @ per definire le variabili $var anziché @var• Per definire i mixin si antepone @mixin: @mixin .shadow { ... }• Per usarli si antepone @include: .class{ @include .shadow; }
    • 101. SassPerchè preferire Sass a Less?
    • 102. SassPerchè preferire Sass a Less? @extend
    • 103. SassPerchè preferire Sass a Less? @extend http://compass-style.org/
    • 104. Vendor prefixes
    • 105. Vendor prefixesDo Repeat Yourself
    • 106. Vendor prefixesDo Repeat Yourself CSS sucks
    • 107. Codice manutenibile
    • 108. Codice manutenibileDon’t Repat yourself
    • 109. Codice manutenibileDon’t Repat yourself I’m a developer I ❤ LESS
    • 110. Mai più CSS fogli di stile moderni con LESSGrazie! #odioicss @romeosalv