O que eu aprendi com Sass

Transcript

1. O que eu aprendi com Sass
2. @lucasmazza
3. http:/ /www.casadocodigo.com.br/products/livro-html-css
5. O que eu aprendi com Sass
6. Best. Feature. Ever. 1.5 - Março 2007
7. 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
8. Muita coisa mudou desde 2007 2010
9. E algumas lições foram aprendidas
10. Sass não vai resolver os seus problemas com CSS
11. Organização Reaproveitamento Seletores Performance
12. MAS…
13. Ele será uma ferramenta muito útil
14. Você só precisa fazer bom uso dele
15. _Partials!
16. // application.scss @import 'normalize'; @import 'functions'; @import 'defaults'; @import 'modules/home'; @import 'sprites/icons'; application.css
17. Cada partial é um módulo (Arquivos pequenos, bem escritos e de fácil manutenção)
18. MAS…
19. Mais módulos, mais arquivos
20. Código fragmentado e muitas peças móveis
21. Modularização é difícil pra #@$#%!
22. DRYCSS OOCSS Smacss BEM ?
23. // application.scss // CSS CSS CSS...
24. // application.scss @import 'normalize'; // SCSS SCSS SCSS... // SCSS SCSS SCSS...
25. // application.scss @import 'normalize'; @import 'functions'; // SCSS SCSS SCSS...
26. // application.scss @import 'normalize'; @import 'functions'; @import 'modules/home'; @import 'modules/page';
27. // application.scss @import 'normalize'; @import 'functions'; @import 'modules/home'; @import 'modules/page'; // ...
28. Deixe o seu CSS crescer aos poucos
29. Aceite que você não precisa acertar de primeira
30. Nesting! DRY Seletores aninhados! wow código agrupado
31. MAS…
32. Blocos muito aninhados ficam impossíveis de se ler
33. E você já viu o CSS que é gerado?
34. .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; } ಠ_ಠ
35. 3 níveis 40/50 linhas E uma boa desculpa (liberado para pseudo selectors)
36. The Inception Rule “don’t go more than four levels deep" http:/ /thesassway.com/beginner/the-inception-rule 20/11/2011
37. Mixins, placeholders e functions
38. Abstrações para padrões que se repetem
39. .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; // ... }
40. %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; // ... }
41. Prefixos Sprites Módulos parametrizáveis Propriedades legadas
42. E não apenas para gerar código
43. // application.scss .thingy { @include size(30px 70px); } ! ! ! ! // application.css .thingy { width: 30px; height: 70px; } vs
44. @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; }
46. Novamente, confira o CSS que é gerado
47. CSS não é Ruby/Java/Python/etc
48. MAS…
49. Só isso não é o suficiente
51. Documentação e Styleguides
52. Documentação é um canal de comunicação
53. E serve como outra abstração do código
54. // ======================================================= // 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
55. // <div class='profile-card'> // <a href='#' class='profile-card-avatar'> // <img class='profile-card-avatar' width='120' height='120'> // <span class='profile-card-follower-count'>13220</span> // <p class='profile-card-star'>@HackerNewsOnion</p> // </a> // <a href='#' class='profile-card-name'>Hacker News Onion</a> // </div> // ============================================================== Exemplos
56. Modificadores // ============================================================= // A full fledged replacement for '<select>' 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 { ! }
57. E qualquer outra informação importante
60. Foque em documentar o que é relevante
61. Módulos complexos Variações importantes Mixins e funções Qualquer outro hotspot
63. http:/ /guidelines.plataformatec.com.br/css
64. O importante é escrever alguma coisa
65. Toolkits para todos os projetos e gostos
66. Compass vs Bourbon
67. bitters sassaparilla neat Susy refills compass-* …
68. Escolha dependências do tamanho que você precisa
69. compass-rails Compass O que eu realmente preciso
70. Eu só quero gerenciar meus sprites
71. lucasmazza/spriteful
72. CLI <3 Não é uma dependência de execução 500 linhas de código
73. E você pode ter o seu próprio toolkit
74. fnando/sassquatch
75. mdo/preboot
76. Use o que funcione para você
77. Use o que funcione para você para o seu time
78. TL;DR
79. “Sass doesn't create bad code. Bad coders do.” http:/ /thesassway.com/editorial/sass-doesnt-create-bad-code-bad-coders-do
80. Escute o seu código
81. Kent Beck @ Smalltalk Best Practice Patterns “Code doesn't lie. If you're not listening, you won't hear the truths it tells.”
82. Converse com o seu time
83. Kyle Neath @ http:/ /warpspire.com/posts/kss/ “Maintainability comes from shared understanding.”
85. Obrigado! https:/ /twitter.com/lucasmazza https:/ /speakerdeck.com/lucas