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
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
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