1. CSS 3 com
Sass e Compass
Loiane Groner
@loiane

3. .msg { padding: 24px; }
.msg h3 {
padding: 24px;
}

4. .msg { padding: 24px; }
.msg h3 {
padding: 24px;
}

5. .msg { padding: 24px; }
.msg h3 {
padding: 24px;
}

6. .msg { padding: 24px; }
.msg h3 {
padding: 24px;
}
Problemas
• Repetição gera problemas para manter codigo
• Relacionamentos não estão claros
• Razões para tais valores estão na cabeça de quem fez o
design

8. Sass é uma extensão do
CSS3 que permite que você
crie folhas de estilo melhores
com um esforço menor

9. Don’t
Repeat
Yourself

10. Var iáv eis

11. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

12. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

13. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

14. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

15. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

16. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

17. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

18. .scss .css
$blue: #3bbfce;
$margin: 16px; /* CSS */
.content-navigation { .content-navigation {
border-color: $blue; border-color: #3bbfce;
color: color: #2b9eab;
darken($blue, 9%); }
}
.border {
.border { padding: 8px;
padding: $margin / 2; margin: 8px;
margin: $margin / 2; border-color: #3bbfce;
border-color: $blue; }
}

20. Com Sass...
• Não tem repetição -> custo de manuntenção é baixo
• Variáveis deixam os relacionamentos claros
• Razões para tais valores ficam evidentes

21. Ne sting

22. .scss .css
table.hl { /* CSS */
margin: 2em 0;
td.ln { table.hl {
text-align: right; margin: 2em 0;
} }
} table.hl td.ln {
text-align: right;
li { }
font: {
family: serif; li {
weight: bold; font-family: serif;
size: 1.2em; font-weight: bold;
} font-size: 1.2em;
} }

23. H er an ça

24. .scss .css
.error { /* CSS */
border: 1px #f00;
background: #fdd; .error, .badError {
} border: 1px #f00;
.error.intrusion { background: #fdd;
font-size: 1.3em; }
font-weight: bold;
} .error.intrusion,
.badError.intrusion {
.badError { font-size: 1.3em;
@extend .error; font-weight: bold;
border-width: 3px; }
}
.badError {
border-width: 3px;
}

25. .scss .css
.error { /* CSS */
border: 1px #f00;
background: #fdd; .error, .badError {
} border: 1px #f00;
.error.intrusion { background: #fdd;
font-size: 1.3em; }
font-weight: bold;
} .error.intrusion,
.badError.intrusion {
.badError { font-size: 1.3em;
@extend .error; font-weight: bold;
border-width: 3px; }
}
.badError {
<div class="error badError"> border-width: 3px;
Erros Graves }
</div>

26. .scss .css
.error { /* CSS */
border: 1px #f00;
background: #fdd; .error, .badError {
} border: 1px #f00;
.error.intrusion { background: #fdd;
font-size: 1.3em; }
font-weight: bold;
} .error.intrusion,
.badError.intrusion {
.badError { font-size: 1.3em;
@extend .error; font-weight: bold;
border-width: 3px; }
}
.badError {
<div class="error badError"> border-width: 3px;
Erros Graves }
</div>

27. .scss .css
.error { /* CSS */
border: 1px #f00;
background: #fdd; .error, .badError {
} border: 1px #f00;
.error.intrusion { background: #fdd;
font-size: 1.3em; }
font-weight: bold;
} .error.intrusion,
.badError.intrusion {
.badError { font-size: 1.3em;
@extend .error; font-weight: bold;
border-width: 3px; }
}
.badError {
<div class="error badError"> border-width: 3px;
Erros Graves }
</div>

28. M ix ins

29. .scss .css
@mixin table-base {
th { /* CSS */
text-align: center;
font-weight: bold; #data {
} float: left;
td, th {padding: 2px} margin-left: 10px;
} }
#data th {
@mixin left($dist) { text-align: center;
float: left; font-weight: bold;
margin-left: $dist; }
} #data td, #data th {
padding: 2px;
#data { }
@include left(10px);
@include table-base;
}

30. Im ports

31. /* projeto.scss */
@import "core";
@import "header", "footer";
sc ss
_ core.
.sc ss
_ footer
sc ss
_h eader.
projeto.css
projeto.scss

32. Opera çõ es
tem á tic as
Ma

33. Operadores Matemáticos
Operadores Matemáticos (+, -, *, /, %) funcionam com
números
2em + 2em; //4em
2em - 1em; //1em
1in + 72pt; //2in
5px * 4; //20px
19 % 3; //1

34. Funções Numéricas
percentage(13/25); //52%
round(4.4); //4
ceil(4.2); //5
floor(4.6); //4
abs(-5); //5

35. Loo pe
dic ion ais
C on es Cond i ci o n a i s < > <= = > == !=
›O perador
else, @ e l se i f
› @if, @
, @ e a ch , @w h i l e
› @for
› and, or

36. Operadores Relacionais (<, >, <=, >=) comparam
números
1 < 25 // true
10 <= 30 // true
3 > 2 // true
3 >= 2 // true
Operacores de Comparação (==, !=) comparam
qualquer tipo
1 + 1 == 2 // true
small != big // true
#000 == black // true

37. Loop @for
.scss
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
.css
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }

38. C ore s!

39. saturate(#9b8a
saturate(#9b8a60,50%) desatur
saturate(#9b8a60,50%) desaturate(#d9a621,50%)
darken(#6cf620,30%) lighten(#2e7805,50%)
darken(#6cf620,30%) darken(#6cf620
darken(#6cf620,30%) lighten
lighten(#2e7805,50%)
fade-out(#fab, .5)
fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)
fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)
fade-in(rgba(#fab,.5),.5)
fade-out(#fab, .5) fade-in(rgb
fade-out(#fab, .

40. Funções

41. .scss
@function pxem($px, $context: 16px) {
@return ($px / $context) * 1em;
}
article h2 { font-size: pxem(45px); }
.css
article h2 { font-size: 2.813em; }

43. Compass is an open-source CSS
Authoring Framework.

44. Coleção de Mixins
Funções Sass
Ambiente
Extensões

45. http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
fonts_dir = "fonts"
javascripts_dir = "javascripts"
output_style = :compressed

46. Qu em
usa?

49. Obrigada!
Loiane Groner
@loiane