+ SASS = - STRESSFare CSS orientato al metodo e all’utente

2

[+ SASS = - Stress] Think CSSA LITTLE PRESENTATION

body{ nome: Fabio; cognome: Fabbrucci; mail-work: fabbrucci@grupporetina.com; mail-personal: fabio.fabbrucci@gmail.com; twitter: @Fabbrucci !important; company: Retina; job: CTO;}

3

[+ SASS = - Stress] Think CSSPROGRAMMA DEL TALK

Come siamo arrivati a Sass Introduzione al Sass Pro e contro In concreto UX e Sass Conclusioni Domande On the battleground

4

[+ SASS = - Stress] Think CSSCOME SIAMO ARRIVATI A SASS

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

5

[+ SASS = - Stress] Think CSSCOME SIAMO ARRIVATI A SASS

Bisogni: Riutilizzo del codice Framework Metodologia condivisa Programmabilità

Siamo passati per: Inclusioni di CSS

Reset.css di Eric Meyer Blueprint

6

[+ SASS = - Stress] Think CSSINTRODUZIONE 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

7

[+ SASS = - Stress] Think CSSMY FIRST SASS FILE

.titolo color: blue font-size: 24px

.testo color: black

a text-decoration: none

8

[+ SASS = - Stress] Think CSSVANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

9

[+ SASS = - Stress] Think CSSVARIABILI

$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

10

[+ SASS = - Stress] Think CSSVANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

11

[+ SASS = - Stress] Think CSSFORMULE 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

12

[+ SASS = - Stress] Think CSSVANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

13

[+ SASS = - Stress] Think CSSGERARCHIA 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)

14

[+ SASS = - Stress] Think CSSVANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

15

[+ SASS = - Stress] Think CSSSVANTAGGI

Framework Different Bug Detection Selezione del personale Formazione e startup

16

[+ SASS = - Stress] Think CSSUX E SASS

Design ed arte – è una storia antica Dinamicità al cambiamento Consapevolezza del progetto Professionalità

17

[+ SASS = - Stress] Think CSSCONCLUSIONI

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

18

[+ SASS = - Stress] Think CSSDOMANDE

?http://www.slideshare.net/fabio.fabbrucci

Feedback PER FAVORE alla mia EmailLa crescita passa per gli errori

Grazie per la pazienza