![RDP#5: color picker
Funzioni
• Permettono di modificare in maniera intuitiva valori
ceil(@number)
floor(@number)
round(@number)
percentage(@number)
unit(@dimension, [@unit: ""])
color(@string)](https://image.slidesharecdn.com/less-03-130227052838-phpapp02/85/HTML5-Italy-Mai-piu-CSS-fogli-di-stile-moderni-con-LESS-Salvatore-Romeo-50-320.jpg)
Uploaded bymarcocasario
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
Il documento discute l'uso di Less, un preprocessore CSS, come soluzione per semplificare e migliorare la scrittura di stili CSS attraverso funzionalità come variabili, mixin e regole annidate. Viene enfatizzato il vantaggio di diventare esperti in Less rapidamente e di come questo possa ridurre la frustrazione con i CSS tradizionali. Inoltre, vengono menzionate le alternative a Less, come Sass e Stylus, e proposte raccomandazioni per ambienti di sviluppo.
More Related Content
Similar to HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
- 1. Mai più CSS foglidi stile moderni con LESS #odioicss @romeosalv
- 2. Chi sono Salvatore Romeo Founder + Front-End Engineer presso
- 3. Domande ? Interrompete in qualsiasi momento Inviate un tweet con l’hashtag #odioicss
- 4. Di cosa parleremo Quantotempo si perde con i CSS LESS: la soluzione Diventare esperto in 15 minuti Impariamo il linguaggio LESS Esempio pratico Ambiente di sviluppo Compilare LESS in CSS L’ambiente di lavoro Ambiente di debug Alternative a LESS: SASS
- 5. Warning: odierete iCSS La cosa che uno sviluppatore odia di più: Copia/Incolla Trova/Sostituisci Se imparate LESS non vorrete più tornare indietro.
- 6. Warning: odierete iCSS Effetto collaterale Odierete i CSS a tal punto che se ve ne passano uno lo riscriverete in LESS.
- 7. Esperti di LESSin 15 minuti
- 8. Esperti di LESSin 15 minuti CSS = LESS stessa sintassi, stessa semantica
- 9. Esperti di LESSin 15 minuti CSS = LESS stessa sintassi, stessa semantica LESS = CSS + estensioni
- 10. Esperti di LESSin 15 minuti CSS = LESS stessa sintassi, stessa semantica LESS = CSS + estensioni Le estensioni LESS: • Variabili • Mixin • Regole annidate (Nested Rules) • Operazioni • Funzioni • Import
- 11. LESS: un CSSpre- processor LESS è un CSS pre-processor LESS CSS (minified)
- 12. LESS: un CSSpre- processor LESS è 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.
- 15.
- 16.
- 17.
- 18.
- 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.
- 23.
- 24.
- 25. RDP#1: Trova&Sostituisci Variabili • Perspecificare 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.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. RDP#2: Copia&Incolla Mixin • Perdefinire 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.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. RDP#3: disordine Regole 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.
- 44.
- 45. RDP#4: matematica Operazioni • Permettonodi 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.
- 48.
- 49. RDP#5: color picker Funzioni • Permettono di modificare in maniera intuitiva colori Creazione di colori: hsla(@hue, @saturation, @lightness, @alpha) hsl hsva(@hue, @saturation, @value, @alpha) hsv Filtri su un canale: hue(@color) saturation(@color) lightness(@color) red(@color) green(@color) blue(@color) alpha(@color) Operazioni sui colori: saturate desaturate lighten darken fadein fadeout fade mix greyscale multiply screen overlay softlight hardlight difference average
- 50. RDP#5: color picker Funzioni •Permettono di modificare in maniera intuitiva valori ceil(@number) floor(@number) round(@number) percentage(@number) unit(@dimension, [@unit: ""]) color(@string)
- 51. Variabili Mixin Regole annidate Operazioni Funzioni Import
- 52. RDP#6: tutto nellostesso file @import url (“style.css"); L’import nei file CSS ha un problema: Occorre un’ulteriore richiesta al server
- 53. RDP#6: tutto nellostesso file @import url (“style.css"); L’import nei file CSS ha un problema: Occorre un’ulteriore richiesta al server Import 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 qui Variabili Mixin Regole annidate Operazioni Funzioni Import Ulteriori approfondimenti sono disponibili sul sito web ufficiale: http://lesscss.org
- 58.
- 59. Un esempio: drycon i mixin
- 60. Un esempio: nestedrules
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. Un esempio: rounded corners
- 67.
- 68.
- 69.
- 70. Definire una colorpalette
- 71. Definire una colorpalette
- 72. Definire una colorpalette
- 73. Un esempio completo by Joshua Johnson http://goo.gl/03tl3
- 74.
- 75. Ambiente di sviluppo Raccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4)
- 76. Ambiente di sviluppo Raccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Colorazione sintassi
- 77. Ambiente di sviluppo Raccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Navigazione struttura
- 78. Ambiente di sviluppo Raccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Auto- completamento
- 79. Ambiente di sviluppo Raccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Evidenziazione errori e warning
- 80. Ambiente di sviluppo Raccomandazione: Eclipse + LESS plugin (http://www.eclipse.org/downloads/ + http://goo.gl/jler4) Link alle definizioni di variabili e mixin
- 81. Compilare LESS inCSS 1)Lato client con less.js:
- 82. Compilare LESS inCSS 1)Lato client con less.js: Pro: • Veloce per iniziare Contro: • Far scaricare al client un file in più • Compilazione del file in .css prima di renderizzare la pagina
- 83. Compilare LESS inCSS 1)Lato client con less.js: Pro: • Veloce per iniziare Contro: • Far scaricare al client un file in più • Compilazione del file in .css prima di renderizzare la pagina
- 84. Compilare LESS inCSS 2) In automatico premendo SAVE: LESS CSS (minified)
- 85. Compilare LESS inCSS 2) In automatico premendo SAVE: LESS CSS http://wearekiss.com/simpless (minified)
- 86. Compilare LESS inCSS 2) In automatico premendo SAVE: LESS CSS http://wearekiss.com/simpless (minified) Pro: • Non vi dovete preoccupare di niente • Esiste l’opzione per la minification Contro:
- 87. Compilare LESS inCSS 3) Server side:
- 88. Compilare LESS inCSS 3) Server side: Pro: • Potete definire i file .less dinamicamente (es. per temi) • Potete fornire ad ogni client un file css personalizzato Contro: • Occorre importare una libreria nel vostro sistema • Overhead se non viene implementato un meccanismo di cache
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95. Alternative a LESS Sass,Stylus, Turbine, Switch CSS, CSS Cacheer, CSS Preprocessor, DT CSS, CSS PP
- 96. Alternative a LESS Sass,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 alternativaa 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. Sass Perchè preferire Sassa Less?
- 102. Sass Perchè preferire Sassa Less? @extend
- 103. Sass Perchè preferire Sassa Less? @extend http://compass-style.org/
- 104.
- 105. Vendor prefixes Do RepeatYourself
- 106. Vendor prefixes Do RepeatYourself CSS sucks
- 107.
- 108. Codice manutenibile Don’t Repatyourself
- 109. Codice manutenibile Don’t Repatyourself I’m a developer I ❤ LESS
- 110. Mai più CSS fogli di stile moderni con LESS Grazie! #odioicss @romeosalv
Editor's Notes
- #5 Parleremo di una tecnica che vi aiuterà nello sviluppo e nella manutenibilità dei vostri fogli di stile
- #8 Se vi prometto che in 15 minuti rivoluziono il vostro modo di scrivere i fogli di stile per sempre mi credete? Facciamo un scommessa
- #12 Compilando un file LESS viene generato un file CSS pronto per essere embeddato nella vostra pagina HTML
- #13 Compilando un file LESS viene generato un file CSS pronto per essere embeddato nella vostra pagina HTML
- #15 Una bella RDP (rottura di scatole)
- #16 Una bella RDP (rottura di scatole)
- #17 Una bella RDP (rottura di scatole)
- #18 Una bella RDP (rottura di scatole)
- #19 Una bella RDP (rottura di scatole)
- #20 Una bella RDP (rottura di scatole)
- #21 Una bella RDP (rottura di scatole)
- #22 Una bella RDP (rottura di scatole)
- #23 Una bella RDP (rottura di scatole)
- #24 Una bella RDP (rottura di scatole)
- #25 Una bella RDP (rottura di scatole)
- #26 Una bella RDP (rottura di scatole)
- #29 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
- #30 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
- #33 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?
- #34 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.
- #82 Raccomandazione: non utilizzatelo
- #83 Raccomandazione: non utilizzatelo
- #84 Raccomandazione: non utilizzatelo
- #89 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.
- #96 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
- #97 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
- #98 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
- #99 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
- #100 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
- #101 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
- #102 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
- #103 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
- #104 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