#uxcamp.it

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

2. A 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;
}
[+SASS=-Stress]ThinkCSS
2

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]ThinkCSS
3

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 my god!
 15 chiamate HTTP per il css
[+SASS=-Stress]ThinkCSS
4

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]ThinkCSS
5

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]ThinkCSS
6

7. MY FIRST SASS FILE
.titolo
color: blue
font-size: 24px
.testo
color: black
a
text-decoration: none
[+SASS=-Stress]ThinkCSS
7

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

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]ThinkCSS
9

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

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]ThinkCSS
11

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

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]ThinkCSS
13

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

15. SVANTAGGI
 Framework
 Different Bug Detection
 Selezione del personale
 Formazione e startup
[+SASS=-Stress]ThinkCSS
15

16. UX E SASS
 Design ed arte – è una storia antica
 Dinamicità al cambiamento
 Consapevolezza del progetto
 Professionalità
[+SASS=-Stress]ThinkCSS
16

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!
 See also
 Blueprint
 Compass
[+SASS=-Stress]ThinkCSS
17

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]ThinkCSS
18