Slide 1
Slide 1 text
O que eu aprendi
com Sass
Slide 2
Slide 2 text
@lucasmazza
Slide 3
Slide 3 text
http:/
/www.casadocodigo.com.br/products/livro-html-css
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
O que eu aprendi
com Sass
Slide 6
Slide 6 text
Best. Feature. Ever.
1.5 - Março 2007
Slide 7
Slide 7 text
Sass (yeap)
!main_color = #82fc08
!
#main
:width 80%
:color = !main_color
:font
:family sans-serif
:size 1.3em
!
p
:color = !main_color - #404040
:font-size 0.8em
Slide 8
Slide 8 text
Muita coisa mudou
desde 2007
2010
Slide 9
Slide 9 text
E algumas lições
foram aprendidas
Slide 10
Slide 10 text
Sass não vai resolver os
seus problemas com CSS
Slide 11
Slide 11 text
Organização
Reaproveitamento
Seletores
Performance
Slide 12
Slide 12 text
MAS…
Slide 13
Slide 13 text
Ele será uma
ferramenta muito útil
Slide 14
Slide 14 text
Você só precisa
fazer bom uso dele
Slide 15
Slide 15 text
_Partials!
Slide 16
Slide 16 text
// application.scss
@import 'normalize';
@import 'functions';
@import 'defaults';
@import 'modules/home';
@import 'sprites/icons';
application.css
Slide 17
Slide 17 text
Cada partial
é um módulo
(Arquivos pequenos, bem escritos e de fácil manutenção)
Slide 18
Slide 18 text
MAS…
Slide 19
Slide 19 text
Mais módulos,
mais arquivos
Slide 20
Slide 20 text
Código fragmentado
e muitas peças móveis
Slide 21
Slide 21 text
Modularização é
difícil pra #@$#%!
Slide 22
Slide 22 text
DRYCSS OOCSS
Smacss BEM
?
Slide 23
Slide 23 text
// application.scss
// CSS CSS CSS...
Slide 24
Slide 24 text
// application.scss
@import 'normalize';
// SCSS SCSS SCSS...
// SCSS SCSS SCSS...
Slide 25
Slide 25 text
// application.scss
@import 'normalize';
@import 'functions';
// SCSS SCSS SCSS...
Slide 26
Slide 26 text
// application.scss
@import 'normalize';
@import 'functions';
@import 'modules/home';
@import 'modules/page';
Slide 27
Slide 27 text
// application.scss
@import 'normalize';
@import 'functions';
@import 'modules/home';
@import 'modules/page';
// ...
Slide 28
Slide 28 text
Deixe o seu CSS
crescer aos poucos
Slide 29
Slide 29 text
Aceite que você não precisa
acertar de primeira
Slide 30
Slide 30 text
Nesting!
DRY
Seletores
aninhados!
wow
código
agrupado
Slide 31
Slide 31 text
MAS…
Slide 32
Slide 32 text
Blocos muito aninhados
ficam impossíveis de se ler
Slide 33
Slide 33 text
E você já viu o
CSS que é gerado?
Slide 34
Slide 34 text
.section-developers #petition-inner #main-content-
wrapper .services-documentation-version .services-
documentation-resources .services-documentation-
resource .resource-method-bundle .resource-
method .implementations .implementation-
bundle .implementation .implementation-download {
font-weight: bold;
text-transform: uppercase;
margin: .25em 0;
}
ಠ_ಠ
Slide 35
Slide 35 text
3 níveis
40/50 linhas
E uma boa desculpa
(liberado para pseudo selectors)
Slide 36
Slide 36 text
The Inception Rule
“don’t go more than four levels deep"
http:/
/thesassway.com/beginner/the-inception-rule
20/11/2011
Slide 37
Slide 37 text
Mixins,
placeholders
e functions
Slide 38
Slide 38 text
Abstrações para padrões
que se repetem
Slide 39
Slide 39 text
.close-modal {
background-image: url('/assets/sprites.png');
background-repeat: no-repeat;
background-position: 0 -20px;
// ...
}
!
.delete-post-button {
background-image: url('/assets/sprites.png');
background-repeat: no-repeat;
background-position: 0 -20px;
// ...
}
Slide 40
Slide 40 text
%icons-sprite-cross {
background-image: url('/assets/sprites.png');
background-repeat: no-repeat;
background-position: 0 -20px;
}
!
.close-modal {
@extend %icons-sprite-cross;
// ...
}
!
.delete-post-button {
@extend %icons-sprite-cross;
// ...
}
Slide 41
Slide 41 text
Prefixos
Sprites
Módulos parametrizáveis
Propriedades legadas
Slide 42
Slide 42 text
E não apenas para
gerar código
Slide 43
Slide 43 text
// application.scss
.thingy {
@include size(30px 70px);
}
!
!
!
!
// application.css
.thingy {
width: 30px;
height: 70px;
}
vs
Slide 44
Slide 44 text
@mixin triangle ($size, $color, $direction) {
height: 0;
width: 0;
!
$width: nth($size, 1);
$height: nth($size, length($size));
!
$foreground-color: nth($color, 1);
$background-color: if(length($color) == 2, nth($color, 2), transparent);
!
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
!
$width: $width / 2;
$height: if(length($size) > 1, $height, $height/2);
!
@if $direction == up {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-bottom: $height solid $foreground-color;
!
} @else if $direction == right {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-left: $height solid $foreground-color;
!
} @else if $direction == down {
border-left: $width solid $background-color;
border-right: $width solid $background-color;
border-top: $height solid $foreground-color;
!
} @else if $direction == left {
border-top: $width solid $background-color;
border-bottom: $width solid $background-color;
border-right: $height solid $foreground-color;
}
}
!
@else if ($direction == up-right) or ($direction == up-left) {
border-top: $height solid $foreground-color;
!
@if $direction == up-right {
border-left: $width solid $background-color;
!
} @else if $direction == up-left {
border-right: $width solid $background-color;
}
}
!
@else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $height solid $foreground-color;
!
@if $direction == down-right {
border-left: $width solid $background-color;
!
} @else if $direction == down-left {
border-right: $width solid $background-color;
}
}
!
@else if ($direction == inset-up) {
border-width: $height $width;
border-style: solid;
border-color: $background-color $background-color $foreground-color;
}
!
@else if ($direction == inset-down) {
border-width: $height $width;
border-style: solid;
border-color: $foreground-color $background-color $background-color;
}
!
@else if ($direction == inset-right) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $background-color $background-color $foreground-color;
}
!
@else if ($direction == inset-left) {
border-width: $width $height;
border-style: solid;
border-color: $background-color $foreground-color $background-color $background-color;
}
}
.thing {
@include triangle(12px, gray, down);
}
!
!
!
!
.thing {
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
border-top-color: gray;
}
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Novamente, confira o
CSS que é gerado
Slide 47
Slide 47 text
CSS não é
Ruby/Java/Python/etc
Slide 48
Slide 48 text
MAS…
Slide 49
Slide 49 text
Só isso não
é o suficiente
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Documentação
e Styleguides
Slide 52
Slide 52 text
Documentação é um
canal de comunicação
Slide 53
Slide 53 text
E serve como outra
abstração do código
Slide 54
Slide 54 text
// =======================================================
// Profile card to display the players in the leaderboard.
//
// Supports an avatar wrapper, follower count and the
// user name. Note that the 'avatar' and the ‘follower
// count' are wrapped inside an 'a' tag so everything
// will be clickable.
Descrição
Slide 55
Slide 55 text
//
// ==============================================================
Exemplos
Slide 56
Slide 56 text
Modificadores
// =============================================================
// A full fledged replacement for '' using a list of
// unordered items.
//
// Modifiers:
//
// :hover - Subtle hover highlight.
// .expanded - Expanded state, displaying the choices list.
// .right-aligned - Aligns the 'toggle' icon to the right.
// =============================================================
!
// Expanded state for the 'combo-selector'.
// ==============================================================
.combo-selector.expanded {
!
}
Slide 57
Slide 57 text
E qualquer outra
informação importante
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Foque em documentar
o que é relevante
Slide 61
Slide 61 text
Módulos complexos
Variações importantes
Mixins e funções
Qualquer outro hotspot
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
http:/
/guidelines.plataformatec.com.br/css
Slide 64
Slide 64 text
O importante é
escrever alguma coisa
Slide 65
Slide 65 text
Toolkits para todos
os projetos e gostos
Slide 66
Slide 66 text
Compass
vs
Bourbon
Slide 67
Slide 67 text
bitters
sassaparilla
neat
Susy
refills
compass-*
…
Slide 68
Slide 68 text
Escolha dependências do
tamanho que você precisa
Slide 69
Slide 69 text
compass-rails
Compass
O que eu
realmente preciso
Slide 70
Slide 70 text
Eu só quero gerenciar
meus sprites
Slide 71
Slide 71 text
lucasmazza/spriteful
Slide 72
Slide 72 text
CLI <3
Não é uma dependência de execução
500 linhas de código
Slide 73
Slide 73 text
E você pode ter o seu
próprio toolkit
Slide 74
Slide 74 text
fnando/sassquatch
Slide 75
Slide 75 text
mdo/preboot
Slide 76
Slide 76 text
Use o que funcione
para você
Slide 77
Slide 77 text
Use o que funcione
para você
para o seu time
Slide 78
Slide 78 text
TL;DR
Slide 79
Slide 79 text
“Sass doesn't create bad
code. Bad coders do.”
http:/
/thesassway.com/editorial/sass-doesnt-create-bad-code-bad-coders-do
Slide 80
Slide 80 text
Escute o seu código
Slide 81
Slide 81 text
Kent Beck @ Smalltalk Best Practice Patterns
“Code doesn't lie. If you're not
listening, you won't hear the
truths it tells.”
Slide 82
Slide 82 text
Converse com o seu time
Slide 83
Slide 83 text
Kyle Neath @ http:/
/warpspire.com/posts/kss/
“Maintainability comes from
shared understanding.”
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
Obrigado!
https:/
/twitter.com/lucasmazza
https:/
/speakerdeck.com/lucas