Sass & Compass: dicas, truques e boas práticas

A cada ano, a linguagem CSS vem se tornando cada vez mais poderosa e diversificada. Inconsistências entre navegadores e soluções alternativas só aumentam a complexidade de manutenção. Construir uma arquitetura CSS sólida é essencial para a vida de um projeto web. Veja como uma ferramenta de pré-processamento de CSS, como o Sass, ajudou no fluxo de trabalho do TechTudo, com uma curva de aprendizado simples para desenvolvedores de qualquer nível.

Transcript

1. Sass & Compass dicas, truques e boas práticas @heliocorreia sexta-feira, 5 de julho de 13
2. /heliocorreia Test Driven Development Métodos Ágeis Padrões Web sexta-feira, 5 de julho de 13
3. sexta-feira, 5 de julho de 13
4. CSS Ilustração: Kevin Cornell em http://alistapart.com/article/testdriven sexta-feira, 5 de julho de 13
5. As Folhas de Estilo em Cascata (CSS) consistem num mecanismo simples para adicionar estilo (como sejam tipos de letra, cores ou espaçamento) a documentos web. — W3C http://www.webstyles-portuguese.info/Style/CSS/ sexta-feira, 5 de julho de 13
6. seletor { propriedade1: valor; propriedade2: valor; propriedade3: valor; } <div> <p>Parágrafo em HTML</p> </div> p { margin: 5px; font-family: arial; color: blue; } DECLARAÇÃO sexta-feira, 5 de julho de 13
7. csszengarden.com sexta-feira, 5 de julho de 13
8. csszengarden.com/?cssfile=167/167.css sexta-feira, 5 de julho de 13
9. COMO É VISTA Redundante Verbosa, Proxila linguagem burra Guess Work Development sexta-feira, 5 de julho de 13
10. sexta-feira, 5 de julho de 13
11. PRÉ- PROCESSADORES Ilustração: Kevin Cornell em http://alistapart.com/article/strategic-content-management sexta-feira, 5 de julho de 13
12. sexta-feira, 5 de julho de 13
13. Sass Ilustração: Kevin Cornell em http://alistapart.com/article/getting-started-with-sass sexta-feira, 5 de julho de 13
14. Syntactically Awesome StyleSheets Sass é uma extensão do CSS que adiciona poder e elegância à linguagem básica. sexta-feira, 5 de julho de 13
15. h1 { ! color: #000; ! a { ! font-weight: normal; ! &:hover { ! font: { ! style: italic; ! weight: bold; ! } ! ! } ! } } h1 { ! color: #000; } h1 a { font-weight: normal; } h1 a:hover { font-style: italic; font-weight: bold; } sexta-feira, 5 de julho de 13
16. @import "compass/css3/inline- block"; div { @include inline-block; } div { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } sexta-feira, 5 de julho de 13
17. $width: 5em; #main { width: $width; } $VARIÁVEIS • Atribuir semântica #main { width: 5em; } sexta-feira, 5 de julho de 13
18. $name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } $VARIÁVEIS p.foo { border-color: blue; } • Atribuir semântica • Interpolação sexta-feira, 5 de julho de 13
19. $content: "A"; $content: "B" !default; $new_content: "C" !default; #main { content: $content; new-content: $new_content; } $VARIÁVEIS #main { content: "A"; new-content: "C"; } • Atribuir semântica • Interpolação • Valor padrão sexta-feira, 5 de julho de 13
20. @OPERAÇÕES • @IF p { @if 1 + 1 == 2 { border: 1px solid; } @if null { border: 3px double; } } p { border: 1px solid; } sexta-feira, 5 de julho de 13
21. @OPERAÇÕES • @IF • @FOR @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } sexta-feira, 5 de julho de 13
22. @OPERAÇÕES • @IF • @FOR • @EACH @each $item in a, b, c { .#{$item}-icon { background: url( '/{$item}.png' ); } } .a-icon { background: url(/a.png); } .b-icon { background: url(/b.png); } .c-icon { background: url(/c.png); } sexta-feira, 5 de julho de 13
23. @OPERAÇÕES • @IF • @FOR • @EACH • @WHILE $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; } sexta-feira, 5 de julho de 13
24. @EXTEND • Seletores complexos .hoverlink { @extend a:hover; } a:hover { text-decoration: underline; } a:hover, .hoverlink { text-decoration: underline; } sexta-feira, 5 de julho de 13
25. @EXTEND • Seletores complexos • Seletores ocultos #context a%extreme { color: blue; font-weight: bold; font-size: 2em; } .notice { @extend %extreme; } #context a.notice { color: blue; font-weight: bold; font-size: 2em; } sexta-feira, 5 de julho de 13
26. @FUNCTION $grid: 40px; $gutter: 10px; @function grid-width($n) { @return $n * $grid + ($n - 1) * $gutter; } #sidebar { width: grid-width(5); } #sidebar { width: 240px; } • Retorno de valores sexta-feira, 5 de julho de 13
27. @MIXIN @mixin borders($color) { border: { color: $color; style: dashed; } } p { @include borders(blue); } p { border-color: blue; border-style: dashed; } • Retorno de CSS sexta-feira, 5 de julho de 13
28. @MIXIN @mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background: url(/logo.gif); } } * html #logo { background: url(/logo.gif); } • Retorno de CSS • Bloco de conteúdo sexta-feira, 5 de julho de 13
29. SOMBRAS @import 'photoshop-drop-shadow'; .box { @include photoshop-drop-shadow( 120, 5px, 0, 5px, rgba(#000, 0.75) ); } .box { -webkit-box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.75); } github.com/heygrady/ compass-photoshop-drop-shadow sexta-feira, 5 de julho de 13
30. compass-style.org sexta-feira, 5 de julho de 13
31. sexta-feira, 5 de julho de 13
32. @import "compass/typography/ vertical_rhythm"; h1 { @include adjust-font-size-to(110px); } h2 { @include adjust-font-size-to(42px); } h1 { font-size: 6.875em; line-height: 1.09091em; } h2 { font-size: 2.625em; line-height: 1.14286em; } gridlover.net sexta-feira, 5 de julho de 13
33. .img-1 { background: image-url("sprite.png"); } .img-1 { background: url("sprite.png"); } IMAGENS • URL sexta-feira, 5 de julho de 13
34. .img-2 { background: inline-image("sprite.png") } .img-2 { background: url( data:image/png;base64,R0l... ); } IMAGENS • URL • Inline sexta-feira, 5 de julho de 13
35. Imagem: google.com.br/images/nav_logo129.png sexta-feira, 5 de julho de 13
36. IMAGENS • URL • Inline • Sprites @import "compass/utilities/ sprites"; @import "btn/*.png"; $btn-sprite-dimensions: true; .submit { @include btn-sprite(submit); } .submit { background-position: 0 -100px; height: 18px; width: 18px; } sexta-feira, 5 de julho de 13
37. Ilustração: Kevin Cornell em http://alistapart.com/article/the-design-of-code-organizing-javascript OPÇÕES DE ORGANIZAÇÃO sexta-feira, 5 de julho de 13
38. 1. BOOTSTRAP Ilustração: Kevin Cornell em http://alistapart.com/article/building-twitter-bootstrap sexta-feira, 5 de julho de 13
39. Fator Design Consistência Atualizações Personalizável Competividade Responsividade Economia de tempo Documentação extensa Compatibilidade futura Simples curva de aprendizado sexta-feira, 5 de julho de 13
40. alademann.github.io/sass-bootstrap/ sexta-feira, 5 de julho de 13
41. 2. Guia de Estilo Ilustração: Kevin Cornell em http://alistapart.com/article/writingainterfacestyleguide sexta-feira, 5 de julho de 13
42. globocom.github.io/bootstrap/ sexta-feira, 5 de julho de 13
43. musica.com.br sexta-feira, 5 de julho de 13
44. developer.android.com/design/style/color.html sexta-feira, 5 de julho de 13
45. 3. PADRÕES Ilustração: Kevin Cornell em http://alistapart.com/article/publication-standards-part-1-the-fragmented-present sexta-feira, 5 de julho de 13
46. SOLID CSS: blog.millermedeiros.com/solid-css/ DRY CSS: vanseodesign.com/css/dry-principles/ OOCSS: github.com/stubbornella/oocss SMACCS: smacss.com BEM: bem.info sexta-feira, 5 de julho de 13
47. Ilustração: http://bem.info/method/definitions/ sexta-feira, 5 de julho de 13
48. Ilustração: http://bem.info/method/definitions/ sexta-feira, 5 de julho de 13
49. Ilustração: http://bem.info/method/definitions/ sexta-feira, 5 de julho de 13
50. .busca { ... } .busca input { ... } .busca submit { ... } .busca submit.disabled { ... } Ilustração: http://bem.info/method/definitions/ sexta-feira, 5 de julho de 13
51. .busca { ... } .busca input { ... } .busca submit { ... } .busca submit.disabled { ... } Ilustração: http://bem.info/method/definitions/ .bloco {...} .bloco-elemento { ... } .bloco-elemento-estado { ... } sexta-feira, 5 de julho de 13
52. .bloco {...} .bloco-elemento { ... } .bloco-elemento-estado { ... } Ilustração: http://bem.info/method/definitions/ .busca { ... } .busca-input { ... } .busca-submit { ... } .busca-submit-disabled { ... } sexta-feira, 5 de julho de 13
53. DICAS DE FERRAMENTAS sexta-feira, 5 de julho de 13
54. FERRAMENTAS • GruntIcon github.com/filamentgroup/grunticon sexta-feira, 5 de julho de 13
55. FERRAMENTAS • GruntIcon • MVCSS mvcss.github.io sexta-feira, 5 de julho de 13
56. FERRAMENTAS • GruntIcon • MVCSS • Bourbon bourbon.io sexta-feira, 5 de julho de 13
57. FERRAMENTAS • GruntIcon • MVCSS • Bourbon • Bourbon Neat neat.bourbon.io sexta-feira, 5 de julho de 13
58. FERRAMENTAS • GruntIcon • MVCSS • Bourbon • Bourbon Neat • Susy susy.oddbird.net sexta-feira, 5 de julho de 13
59. FERRAMENTAS • GruntIcon • MVCSS • Bourbon • Bourbon Neat • Susy • Scout mhs.github.io/scout-app sexta-feira, 5 de julho de 13
60. FERRAMENTAS • GruntIcon • MVCSS • Bourbon • Bourbon Neat • Susy • Scout • SassMe sassme.arc90.com sexta-feira, 5 de julho de 13
61. FERRAMENTAS • GruntIcon • MVCSS • Bourbon • Bourbon Neat • Susy • Scout • SassMe • SassMeister sassmeister.com sexta-feira, 5 de julho de 13
62. FERRAMENTAS • GruntIcon • MVCSS • Bourbon • Bourbon Neat • Susy • Scout • SassMe • SassMeister • FireSass addons.mozilla.org/en-US/firefox/addon/ firesass-for-firebug/ sexta-feira, 5 de julho de 13
63. MAIS DICAS sexta-feira, 5 de julho de 13
64. uptodate.frontendrescue.org sexta-feira, 5 de julho de 13
65. uptodate.frontendrescue.org sexta-feira, 5 de julho de 13
66. uptodate.frontendrescue.org sexta-feira, 5 de julho de 13
67. uptodate.frontendrescue.org sexta-feira, 5 de julho de 13
68. uptodate.frontendrescue.org sexta-feira, 5 de julho de 13
69. uptodate.frontendrescue.org sexta-feira, 5 de julho de 13
70. uptodate.frontendrescue.org sexta-feira, 5 de julho de 13
71. OBRIGADO sexta-feira, 5 de julho de 13
72. ? sexta-feira, 5 de julho de 13