![Page 1: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/1.jpg)
+ SASS = - STRESSFare CSS orientato al metodo e all’utente
![Page 2: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/2.jpg)
2
[+ S
ASS =
- Stre
ss] Thin
k C
SS
A LITTLE PRESENTATION
body{ nome: Fabio; cognome: Fabbrucci; mail-work: [email protected]; mail-personal: [email protected]; twitter: @Fabbrucci !important; company: Retina; job: CTO;}
![Page 3: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/3.jpg)
3
[+ S
ASS =
- Stre
ss] Thin
k C
SS
PROGRAMMA DEL TALK
Come siamo arrivati a Sass Introduzione al Sass Pro e contro In concreto UX e Sass Conclusioni Domande On the battleground
![Page 4: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/4.jpg)
4
[+ S
ASS =
- Stre
ss] Thin
k C
SS
COME 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
![Page 5: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/5.jpg)
5
[+ S
ASS =
- Stre
ss] Thin
k C
SS
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
![Page 6: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/6.jpg)
6
[+ S
ASS =
- Stre
ss] Thin
k C
SS
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
![Page 7: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/7.jpg)
7
[+ S
ASS =
- Stre
ss] Thin
k C
SS
MY FIRST SASS FILE
.titolo color: blue font-size: 24px
.testo color: black
a text-decoration: none
![Page 8: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/8.jpg)
8
[+ S
ASS =
- Stre
ss] Thin
k C
SS
VANTAGGI
Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità
Scrittura del CSS Prestazioni
Framework Umani
Riutilizzo Arginamento Metodica Manutenibilità
![Page 9: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/9.jpg)
9
[+ S
ASS =
- Stre
ss] Thin
k C
SS
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
![Page 10: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/10.jpg)
10
[+ S
ASS =
- Stre
ss] Thin
k C
SS
VANTAGGI
Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità
Scrittura del CSS Prestazioni
Framework Umani
Riutilizzo Arginamento Metodica Manutenibilità
![Page 11: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/11.jpg)
11
[+ S
ASS =
- Stre
ss] Thin
k C
SS
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
![Page 12: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/12.jpg)
12
[+ S
ASS =
- Stre
ss] Thin
k C
SS
VANTAGGI
Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità
Scrittura del CSS Prestazioni
Framework Umani
Riutilizzo Arginamento Metodica Manutenibilità
![Page 13: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/13.jpg)
13
[+ S
ASS =
- Stre
ss] Thin
k C
SS
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)
![Page 14: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/14.jpg)
14
[+ S
ASS =
- Stre
ss] Thin
k C
SS
VANTAGGI
Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità
Scrittura del CSS Prestazioni
Framework Umani
Riutilizzo Arginamento Metodica Manutenibilità
![Page 15: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/15.jpg)
15
[+ S
ASS =
- Stre
ss] Thin
k C
SS
SVANTAGGI
Framework Different Bug Detection Selezione del personale Formazione e startup
![Page 16: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/16.jpg)
16
[+ S
ASS =
- Stre
ss] Thin
k C
SS
UX E SASS
Design ed arte – è una storia antica Dinamicità al cambiamento Consapevolezza del progetto Professionalità
![Page 17: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/17.jpg)
17
[+ S
ASS =
- Stre
ss] Thin
k C
SS
CONCLUSIONI
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
![Page 18: + SASS = - S TRESS Fare CSS orientato al metodo e allutente](https://reader036.vdocuments.mx/reader036/viewer/2022082919/5542eb5c497959361e8cadb6/html5/thumbnails/18.jpg)
18
[+ S
ASS =
- Stre
ss] Thin
k C
SS
DOMANDE
?
http://www.slideshare.net/fabio.fabbrucciFeedback PER FAVORE alla mia Email
La crescita passa per gli erroriGrazie per la pazienza