SASS GIVE SUPERPOWERS TO YOUR CSS!

Quante volte abbiamo pensato "se potessi aggiungere una variabile che gestisce il colore del testo..." oppure "devo proprio riscrivere tutto questo codice ogni volta"
CSS non è un linguaggio di programmazione e questo lo sappiamo, ma i preprocessori ci vengono in aiuto!

Transcript

1. SASS GIVE SUPERPOWERs TO YOUR CSS!
2. SOMETHING ABOUT ME Federico Bonomi, 25yrs old, Verona work for Intesys since 2008 Yesterday: Web developer / frontender Today: Ruby on Rails Developer
3. SOMETHING ABOUT DEVS siamo TUTTI UN Pò frontenderS MA PRIMA ANCORA SIAMO TUTTI (O QUASI) PROGRAMMATORI
4. SOMETHING ABOUT DEVS ogni linguaggio DI PROGRAMMAZIONE consente di definire Variabili e funzioni creare dei moduli eseguire delle espressioni matematiche
5. in css no!
6. SOMETHING ABOUT css non esistono variabili non esistono funzioni esistono moduli esiste OOCSS, SMACSS, DRY CSS, … MA...
7. SOMETHING about our css code
8. SOMETHING about our css code
9. css non è un linguaggio di programmazione
10. SOMETHING ABOUT css “...Ma il css è questo, non posso inventare niente di nuovo…”
11. SOMETHING ABOUT css Ma non vogliamo inventare nulla di nuovo Vogliamo usare qualcosa che ci aiuti a produrre CSS ma con i vantaggi che abbiamo in un linguaggio di programmazione!
12. SOMETHING ABOUT sass Sass is the most mature, stable, and powerful professional grade CSS extension language in the world
13. SOMETHING ABOUT sass SASS è un pre-processore. La sua sintassi è molto simile al CSS. Il codice SASS, una volta compilato, produce codice CSS
14. SOMETHING ABOUT sass 1) Variables 2) Nesting 3) Partials 4) Import 5) Mixins 6) Extends / Inheritance 7) Operators
15. SOMETHING ABOUT sass and scss Prima di iniziare è importante sapere che in SASS le parentesi graffe e i punti e vigola spariscono Inoltre l’indentazione è fondamentale per la compilazione
16. Variables In SASS le variabili vengono definite come in php ovvero precedute dal carattere $
17. Variables
18. nesting Quando scriviamo codice html scriviamo del codice nidificato In CSS questo non è possibile Quando vogliamo applicare stili a elementi nidificati scriviamo catene di selettori molto lunghe
19. nesting
20. partials I partial (parziali) sono a tutti gli effetti file contenenti porzioni di codice SASS Questo ci permette di organizzare al meglio il nostro codice SASS e cercare di modularizzare più possibile
21. partials I file partials vengono denominati con un underscore davanti ad esempio _reset.sass
22. IMPORT In CSS l’import corrisponde ad una chiamata http. In sass import serve per includere un file sass, che potrebbe essere un partial, senza generare una chiamata http.
23. IMPORT
24. IMPORT
25. mixins Alcune cose da scrivere in css sono noiose, soprattutto in css3 ad esempio le direttive per ogni browser Un mixin è a tutti gli effetti una funzione.
26. mixins
27. mixins
28. Extends / Inheritance Questa è una delle caratteristiche più usate. Aiuta a tenere il nostro codice CSS ancora più compatto.
29. Extends / Inheritance
30. operators Sass ha una serie di operatori come +, -, *, %. Nell’esempio successivo andremo a creare una griglia fluida
31. operators
32. sass lists Le sass lists corrispondono ad un array semplice. Potremmo paragonarla a: PHP: array(1, 2, 3); JS: new Array(1, 2, 3);
33. sass lists Le liste possono essere definite separate da spazi o da punti e virgola
34. sass lists importante il primo elemento non si trova in posizione 0 ma in posizione 1
35. sass lists . read nth($list, $index) ritorna l’elemento in posizione $index all’interno di $list length($list) ritorna il numero di elementi index($list, $value) ritorna all’interno di $list il primo indice trovato all’interno di $value
36. sass lists . edit append($list, $value) appende $value alla fine di $list join($list-1, $list-2) appende $list-1 a $list-2 reject($list, $value) rimuove $value da $list
37. sass lists . print
38. sass maps Le sass maps corrispondono ad un array associativo Sass maps è quindi un array chiave valore
39. sass maps
40. sass maps
41. sass install sass è una gemma di ruby
42. sass install Una volta installato ruby procediamo a installare sass con un semplice comando Per verificare se effettivamente installato:
43. sass compile per compilare lanciamo: volendo utilizziamo watch che ri-compila ad ogni modifica di un file
44. sass compile for all
45. preprocessor battle
46. sass vs less Framework e librerie più mature (Bourbon, Compass) Built-in watchers sintassi più “sintetica”
47. sass vs stylus single editing style ci sono due sintassi, esclusive fra loro non si possono mescolare gli stili
48. sass vs less vs stylus variables
49. sass vs less vs stylus reference selector
50. sass vs less vs stylus mixins
51. sass vs less vs stylus extend
52. sass vs less vs stylus color function
53. my story il più grande scoglio è l’installazione/configurazione sass è un linguaggio molto simile a ciò che già conosciamo l’importante è avere un approccio graduale
54. my story > Iniziamo con un file unico e a evitare parentesi e punti e virgola > proseguiamo iniziando ad usare delle variabili > innestiamo il codice > spostiamo il codice da un file unico a più file organizzati > Scriviamo qualche mixins e riutilizziamolo > Usiamo la potenza dell’ extend > divertiamoci con liste, mappe, controlli condizionali, iteratori, ...
55. my story . folder structure definire una struttura logica di base che può essere rispettata o estesa per ogni progetto indipendentemente dalla finalità di quest’ultimo.
56. my story . folder structure > >
57. my story . folder structure . bootstrap > >