+ SASS = - stress

+ SASS = - Stress
Fare CSS orientato al metodo e all’utente

A littlePresentation
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] Think CSS
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
3

Il cliente cambia idea a CSS fatto
I commenti nel CSS stavano proliferando
CSS di un anno fa… Oh mygod!
15 chiamate HTTP per il css
4

Bisogni:
Riutilizzo del codice
Framework
Metodologia condivisa
Programmabilità
Siamo passati per:
Inclusioni di CSS
Reset.css di Eric Meyer
Blueprint
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
6

My First Sass File
.titolo
color: blue
font-size: 24px
.testo
color: black
a
text-decoration: none
7

Vantaggi
Tecnici
Variabili
Formule o Mixin
Gerarchia o Nesting
Velocità
Scrittura del CSS
Prestazioni
Framework
Umani
Riutilizzo
Arginamento
Metodica
Manutenibilità
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
9

Vantaggi
Tecnici
Variabili
Formule o Mixin
Gerarchia o Nesting
Velocità
Scrittura del CSS
Prestazioni
Framework
Umani
Riutilizzo
Arginamento
Metodica
Manutenibilità
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
11

Vantaggi
Tecnici
Variabili
Formule o Mixin
Gerarchia o Nesting
Velocità
Scrittura del CSS
Prestazioni
Framework
Umani
Riutilizzo
Arginamento
Metodica
Manutenibilità
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)
13

Vantaggi
Tecnici
Variabili
Formule o Mixin
Gerarchia o Nesting
Velocità
Scrittura del CSS
Prestazioni
Framework
Umani
Riutilizzo
Arginamento
Metodica
Manutenibilità
14

Svantaggi
Framework
Different Bug Detection
Selezione del personale
Formazione e startup
15

UX e Sass
Design ed arte – è una storia antica
Dinamicità al cambiamento
Consapevolezza del progetto
Professionalità
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!
Seealso
Blueprint
Compass
17

Domande
?
http://www.slideshare.net/fabio.fabbrucci
Feedback PER FAVORE alla mia Email
La crescita passa per gli errori
Grazie per la pazienza
18

+ SASS = - stress

by Fabio Fabbrucci on Nov 04, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

+ SASS = - stress — Presentation Transcript