+ SASS = - Stress

1. + SASS = - Stress Fare CSS orientato al metodo e all’utente

2. A littlePresentation body{ nome: Fabio; cognome: Fabbrucci; mail-work: fabbrucci@grupporetina.com; mail-personal: fabio.fabbrucci@gmail.com; twitter: @Fabbrucci !important; company: Retina; job: CTO; } [+ SASS = - Stress] Think CSS

3. Programma del talk • Come siamo arrivati a Sass • Introduzione al Sass • Pro e contro • In concreto • UX e Sass • Conclusioni • Domande • On the battleground [+ SASS = - Stress] Think CSS

4. Come siamo arrivati a Sass • Il cliente cambia idea a CSS fatto • I commenti nel CSS stavano proliferando • CSS di un anno fa… Oh mygod! • 15 chiamate HTTP per il css [+ SASS = - Stress] Think CSS

5. Come siamo arrivati a Sass • Bisogni: • Riutilizzo del codice • Framework • Metodologia condivisa • Programmabilità • Siamo passati per: • Inclusioni di CSS • Reset.css di Eric Meyer • Blueprint [+ SASS = - Stress] Think CSS

6. Introduzione a Sass • http://sass-lang.com/ • “Sass makes CSS fun again” • Scritto in Ruby • Sintassi YML • 2 forme di sintassi • Scss • Sass • Cross Platform • Tool di conversione Css > Sass [+ SASS = - Stress] Think CSS

7. My First Sass File .titolo color: blue font-size: 24px .testo color: black a text-decoration: none [+ SASS = - Stress] Think CSS

8. Vantaggi • Tecnici • Variabili • Formule o Mixin • Gerarchia o Nesting • Velocità • Scrittura del CSS • Prestazioni • Framework • Umani • Riutilizzo • Arginamento • Metodica • Manutenibilità [+ SASS = - Stress] Think CSS

9. Variabili $larghezza_totale: 950px $bordo: 3px $altezza_content: 400px $color_blu: #0000ff $color_rosso: #ff0000 $color_verde: #00ff00 $color_grigio: #bcbcbc $color_grigioChiaro: #999999 $color_grigioScuro: #666666 [+ SASS = - Stress] Think CSS

10. Vantaggi • Tecnici • Variabili • Formule o Mixin • Gerarchia o Nesting • Velocità • Scrittura del CSS • Prestazioni • Framework • Umani • Riutilizzo • Arginamento • Metodica • Manutenibilità [+ SASS = - Stress] Think CSS

11. Formule o Mixin $larghezza_container: $larghezza_totale - ($bordo * 2) $larghezza_right: $altezza_content $altezza_li: ($altezza_content - 3 * $bordo) / 4 $larghezza_li: $altezza_li $larghezza_left: ($larghezza_li + $bordo) * 2 $larghezza_center: $larghezza_container - $larghezza_left - $larghezza_right - $bordo [+ SASS = - Stress] Think CSS

12. Vantaggi • Tecnici • Variabili • Formule o Mixin • Gerarchia o Nesting • Velocità • Scrittura del CSS • Prestazioni • Framework • Umani • Riutilizzo • Arginamento • Metodica • Manutenibilità [+ SASS = - Stress] Think CSS

13. Gerarchia o Nesting .titolo font-size: 24px a color: blue =style_titolo($size = 24px) font-size: $size a color: blue &:hover color: $color1 H1 +style_titolo(34px) [+ SASS = - Stress] Think CSS

14. Vantaggi • Tecnici • Variabili • Formule o Mixin • Gerarchia o Nesting • Velocità • Scrittura del CSS • Prestazioni • Framework • Umani • Riutilizzo • Arginamento • Metodica • Manutenibilità [+ SASS = - Stress] Think CSS

15. Svantaggi • Framework • Different Bug Detection • Selezione del personale • Formazione e startup [+ SASS = - Stress] Think CSS

16. UX e Sass • Design ed arte – è una storia antica • Dinamicità al cambiamento • Consapevolezza del progetto • Professionalità [+ SASS = - Stress] Think CSS

17. Conclusioni • Miglioramenti notevoli al ciclo di sviluppo • Personale orientato al metodo e non alle conoscenze • Do less • Fare Css ora è Fun, anche per me! • Seealso • Blueprint • Compass [+ SASS = - Stress] Think CSS

18. Domande ? http://www.slideshare.net/fabio.fabbrucci Feedback PER FAVORE alla mia Email La crescita passa per gli errori Grazie per la pazienza [+ SASS = - Stress] Think CSS