SlideShare a Scribd company logo
1 of 18
Download to read offline
+ 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.fabbrucci@gmail.com;
twitter: @Fabbrucci !important;
company: Retina;
job: CTO;
}
[+SASS=-Stress]ThinkCSS
2
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
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
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
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
MY FIRST SASS FILE
.titolo
color: blue
font-size: 24px
.testo
color: black
a
text-decoration: none
[+SASS=-Stress]ThinkCSS
7
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Framework
 Umani
 Riutilizzo
 Arginamento
 Metodica
 Manutenibilità
[+SASS=-Stress]ThinkCSS
8
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
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Framework
 Umani
 Riutilizzo
 Arginamento
 Metodica
 Manutenibilità
[+SASS=-Stress]ThinkCSS
10
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
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Framework
 Umani
 Riutilizzo
 Arginamento
 Metodica
 Manutenibilità
[+SASS=-Stress]ThinkCSS
12
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
VANTAGGI
 Tecnici
 Variabili
 Formule o Mixin
 Gerarchia o Nesting
 Velocità
 Scrittura del CSS
 Prestazioni
 Framework
 Umani
 Riutilizzo
 Arginamento
 Metodica
 Manutenibilità
[+SASS=-Stress]ThinkCSS
14
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
 Professionalità
[+SASS=-Stress]ThinkCSS
16
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
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

More Related Content

Similar to + SASS = - stress

Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Valerio Radice
 
GWT vs CSS3
GWT vs CSS3GWT vs CSS3
GWT vs CSS3GWTcon
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...
Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...
Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...Tsuneo Kurihara
 
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Domenico Monaco
 
Lezione WordPress Università degli Studi di Milano: Installazione e Gestione
Lezione WordPress Università degli Studi di Milano: Installazione e GestioneLezione WordPress Università degli Studi di Milano: Installazione e Gestione
Lezione WordPress Università degli Studi di Milano: Installazione e Gestionealessandro gasparotto
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS DevicesAndrea Picchi
 
Miglioriamo le performance di wordpress
Miglioriamo le performance di wordpress Miglioriamo le performance di wordpress
Miglioriamo le performance di wordpress GGDBologna
 
Come Javascript ha cambiato il CSS
Come Javascript ha cambiato il CSS Come Javascript ha cambiato il CSS
Come Javascript ha cambiato il CSS Davide Di Pumpo
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al cssEnrico Mainero
 
Bootstrap 4 is Coming!
Bootstrap 4 is Coming!Bootstrap 4 is Coming!
Bootstrap 4 is Coming!Carmine Alfano
 
CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th
CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10thCSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th
CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th将一 深見
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webMassimo Bonanni
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerMatteo Magni
 
Flavio atzeni smau mi 2013
Flavio atzeni smau  mi 2013Flavio atzeni smau  mi 2013
Flavio atzeni smau mi 2013Paradisi63
 
Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source"
Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source" Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source"
Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source" Abstract Technology Agency
 
Giovambattista Fazioli, 10 more things
Giovambattista Fazioli, 10 more thingsGiovambattista Fazioli, 10 more things
Giovambattista Fazioli, 10 more thingsKnowCamp
 

Similar to + SASS = - stress (20)

Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)Introduzione a Sass e Less (ITA)
Introduzione a Sass e Less (ITA)
 
GWT vs CSS3
GWT vs CSS3GWT vs CSS3
GWT vs CSS3
 
Guida a less
Guida a lessGuida a less
Guida a less
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...
Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...
Accelera lo sviluppo con il web framework! Componenti a supporto dello svilup...
 
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010
 
Lezione WordPress Università degli Studi di Milano: Installazione e Gestione
Lezione WordPress Università degli Studi di Milano: Installazione e GestioneLezione WordPress Università degli Studi di Milano: Installazione e Gestione
Lezione WordPress Università degli Studi di Milano: Installazione e Gestione
 
Etica30 Techside 2009
Etica30 Techside 2009Etica30 Techside 2009
Etica30 Techside 2009
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
Miglioriamo le performance di wordpress
Miglioriamo le performance di wordpress Miglioriamo le performance di wordpress
Miglioriamo le performance di wordpress
 
Come Javascript ha cambiato il CSS
Come Javascript ha cambiato il CSS Come Javascript ha cambiato il CSS
Come Javascript ha cambiato il CSS
 
Guida introduttiva al css
Guida introduttiva al cssGuida introduttiva al css
Guida introduttiva al css
 
Bootstrap 4 is Coming!
Bootstrap 4 is Coming!Bootstrap 4 is Coming!
Bootstrap 4 is Coming!
 
CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th
CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10thCSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th
CSSの嫌なところを解決できる(かも)。そう、CSS Houdiniならね 20170825 we are_javascripters@10th
 
Html5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo webHtml5 e css3 nuovi strumenti per un nuovo web
Html5 e css3 nuovi strumenti per un nuovo web
 
HTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesignerHTML5 e Css3 - 5 | WebMaster & WebDesigner
HTML5 e Css3 - 5 | WebMaster & WebDesigner
 
Flavio atzeni smau mi 2013
Flavio atzeni smau  mi 2013Flavio atzeni smau  mi 2013
Flavio atzeni smau mi 2013
 
Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source"
Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source" Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source"
Slides webinar Abstract "Pregi e difetti dei principali CMS Open Source"
 
Giovambattista Fazioli, 10 more things
Giovambattista Fazioli, 10 more thingsGiovambattista Fazioli, 10 more things
Giovambattista Fazioli, 10 more things
 

More from Fabio Fabbrucci

Living Styleguide: design and development workflows
Living Styleguide: design and development workflowsLiving Styleguide: design and development workflows
Living Styleguide: design and development workflowsFabio Fabbrucci
 
Brainstorming efficaci - Disney Model e altro ...
Brainstorming efficaci - Disney Model e altro ...Brainstorming efficaci - Disney Model e altro ...
Brainstorming efficaci - Disney Model e altro ...Fabio Fabbrucci
 
Agile Product Strategy - Dalla Startup Weekend al mercato
Agile Product Strategy - Dalla  Startup Weekend al mercatoAgile Product Strategy - Dalla  Startup Weekend al mercato
Agile Product Strategy - Dalla Startup Weekend al mercatoFabio Fabbrucci
 
Come non trovare il lavoro che non ci piace
Come non trovare il lavoro che non ci piaceCome non trovare il lavoro che non ci piace
Come non trovare il lavoro che non ci piaceFabio Fabbrucci
 
Wind Business Factor - Abmundi Presentation
Wind Business Factor - Abmundi PresentationWind Business Factor - Abmundi Presentation
Wind Business Factor - Abmundi PresentationFabio Fabbrucci
 

More from Fabio Fabbrucci (7)

Living Styleguide: design and development workflows
Living Styleguide: design and development workflowsLiving Styleguide: design and development workflows
Living Styleguide: design and development workflows
 
Brainstorming efficaci - Disney Model e altro ...
Brainstorming efficaci - Disney Model e altro ...Brainstorming efficaci - Disney Model e altro ...
Brainstorming efficaci - Disney Model e altro ...
 
Agile Product Strategy - Dalla Startup Weekend al mercato
Agile Product Strategy - Dalla  Startup Weekend al mercatoAgile Product Strategy - Dalla  Startup Weekend al mercato
Agile Product Strategy - Dalla Startup Weekend al mercato
 
Come non trovare il lavoro che non ci piace
Come non trovare il lavoro che non ci piaceCome non trovare il lavoro che non ci piace
Come non trovare il lavoro che non ci piace
 
Wind Business Factor - Abmundi Presentation
Wind Business Factor - Abmundi PresentationWind Business Factor - Abmundi Presentation
Wind Business Factor - Abmundi Presentation
 
To fail or not to fail
To fail or not to failTo fail or not to fail
To fail or not to fail
 
Selenium for Designers
Selenium for DesignersSelenium for Designers
Selenium for Designers
 

+ SASS = - stress

  • 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