+ SASS = - S TRESS Fare CSS orientato al metodo e allutente.

Presentazione sul tema: "+ SASS = - S TRESS Fare CSS orientato al metodo e allutente."— Transcript della presentazione:

1 + SASS = - S TRESS Fare CSS orientato al metodo e allutente

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

3 P ROGRAMMA 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 3

4 C OME SIAMO ARRIVATI A S ASS Il cliente cambia idea a CSS fatto I commenti nel CSS stavano proliferando CSS di un anno fa… Oh my god! 15 chiamate HTTP per il css [+ SASS = - Stress] Think CSS 4

5 C OME SIAMO ARRIVATI A S ASS Bisogni: Riutilizzo del codice Framework Metodologia condivisa Programmabilità Siamo passati per: Inclusioni di CSS Reset.css di Eric Meyer Blueprint [+ SASS = - Stress] Think CSS 5

6 I NTRODUZIONE A S ASS 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 6

7 M Y F IRST S ASS F ILE.titolo color: blue font-size: 24px.testo color: black a text-decoration: none [+ SASS = - Stress] Think CSS 7

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

9 V ARIABILI $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 9

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

11 F ORMULE O M IXIN $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 11

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

13 G ERARCHIA O N ESTING.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 13

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

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

16 UX E S ASS Design ed arte – è una storia antica Dinamicità al cambiamento Consapevolezza del progetto Professionalità [+ SASS = - Stress] Think CSS 16

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

18 D OMANDE ? 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 18