HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
•
11 recomendaciones•3,064 vistas
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!
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Destacado (20)
Similar a HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
Similar a HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo (20)
Más de marcocasario
Más de marcocasario (20)
Último
Último (9)
HTML5 Italy: Mai più CSS, fogli di stile moderni con LESS - Salvatore Romeo
- 1. Mai più CSS fogli di 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 Quanto tempo 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 i CSS La cosa che uno sviluppatore odia di più: Copia/Incolla Trova/Sostituisci Se imparate LESS non vorrete più tornare indietro.
- 6. Warning: odierete i CSS Effetto collaterale Odierete 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 minuti CSS = LESS stessa sintassi, stessa semantica
- 9. Esperti di LESS in 15 minuti CSS = LESS stessa sintassi, stessa semantica LESS = CSS + estensioni
- 10. Esperti di LESS in 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 CSS pre- processor LESS è un CSS pre-processor LESS CSS (minified)
- 12. LESS: un CSS pre- 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
- 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;
- 25. RDP#1: Trova&Sostituisci Variabili • 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
- 33. RDP#2: Copia&Incolla Mixin • 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: 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
- 45. RDP#4: matematica Operazioni • 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
- 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 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 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. Esempi
- 59. Un esempio: dry con i mixin
- 60. Un esempio: nested rules
- 64. Un esempio: glow
- 66. Un esempio: rounded corners
- 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
- 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 in CSS 1)Lato client con less.js:
- 82. Compilare LESS in CSS 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 in CSS 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 in CSS 2) In automatico premendo SAVE: LESS CSS (minified)
- 85. Compilare LESS in CSS 2) In automatico premendo SAVE: LESS CSS http://wearekiss.com/simpless (minified)
- 86. Compilare LESS in CSS 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 in CSS 3) Server side:
- 88. Compilare LESS in CSS 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
- 94. Alternative
- 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 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. Sass Perchè preferire Sass a Less?
- 102. Sass Perchè preferire Sass a Less? @extend
- 103. Sass Perchè preferire Sass a Less? @extend http://compass-style.org/
- 104. Vendor prefixes
- 105. Vendor prefixes Do Repeat Yourself
- 106. Vendor prefixes Do Repeat Yourself CSS sucks
- 107. Codice manutenibile
- 108. Codice manutenibile Don’t Repat yourself
- 109. Codice manutenibile Don’t Repat yourself I’m a developer I ❤ LESS
- 110. Mai più CSS fogli di stile moderni con LESS Grazie! #odioicss @romeosalv
Notas del editor
- 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