Your SlideShare is downloading. ×
0
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
+ SASS = - stress
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

+ SASS = - stress

1,373

Published on

#uxcamp.it

#uxcamp.it

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×