+ SASS = - STRESS
Fare CSS orientato al metodo e all’utente
A LITTLE PRESENTATION
body{
nome: Fabio;
cognome: Fabbrucci;
mail-work: fabbrucci@grupporetina.com;
mail-personal: fabio.f...
PROGRAMMA DEL TALK
 Come siamo arrivati a Sass
 Introduzione al Sass
 Pro e contro
 In concreto
 UX e Sass
 Conclusi...
COME SIAMO ARRIVATI A SASS
 Il cliente cambia idea a CSS fatto
 I commenti nel CSS stavano proliferando
 CSS di un anno...
COME SIAMO ARRIVATI A SASS
 Bisogni:
 Riutilizzo del codice
 Framework
 Metodologia condivisa
 Programmabilità
 Siam...
INTRODUZIONE A SASS
 http://sass-lang.com/
 “Sass makes CSS fun again”
 Scritto in Ruby
 Sintassi YML
 2 forme di sin...
MY FIRST SASS FILE
.titolo
color: blue
font-size: 24px
.testo
color: black
a
text-decoration: none
[+SASS=-Stress]ThinkCSS...
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Fram...
VARIABILI
$larghezza_totale: 950px
$bordo: 3px
$altezza_content: 400px
$color_blu: #0000ff
$color_rosso: #ff0000
$color_ve...
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Fram...
FORMULE O MIXIN
$larghezza_container: $larghezza_totale - ($bordo * 2)
$larghezza_right: $altezza_content
$altezza_li: ($a...
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Fram...
GERARCHIA O NESTING
.titolo
font-size: 24px
a
color: blue
=style_titolo($size = 24px)
font-size: $size
a
color: blue
&:hov...
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Fram...
SVANTAGGI
 Framework
 Different Bug Detection
 Selezione del personale
 Formazione e startup
[+SASS=-Stress]ThinkCSS
15
UX E SASS
 Design ed arte – è una storia antica
 Dinamicità al cambiamento
 Consapevolezza del progetto
 Professionali...
CONCLUSIONI
 Miglioramenti notevoli al ciclo di sviluppo
 Personale orientato al metodo e non alle
conoscenze
 Do less
...
DOMANDE
?
http://www.slideshare.net/fabio.fabbrucci
Feedback PER FAVORE alla mia Email
La crescita passa per gli errori
Gr...
Upcoming SlideShare
Loading in …5
×

+ SASS = - stress

1,497
-1

Published on

#uxcamp.it

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,497
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

+ SASS = - stress

  1. 1. + SASS = - STRESS Fare CSS orientato al metodo e all’utente
  2. 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. 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. 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. 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. 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. 7. MY FIRST SASS FILE .titolo color: blue font-size: 24px .testo color: black a text-decoration: none [+SASS=-Stress]ThinkCSS 7
  8. 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. 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. 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. 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. 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. 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. 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. 15. SVANTAGGI  Framework  Different Bug Detection  Selezione del personale  Formazione e startup [+SASS=-Stress]ThinkCSS 15
  16. 16. UX E SASS  Design ed arte – è una storia antica  Dinamicità al cambiamento  Consapevolezza del progetto  Professionalità [+SASS=-Stress]ThinkCSS 16
  17. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×