Aumentando a produtividade com Sass

Apresentação de introdução e detalhamento das extensões providas pelo Sass para desenvolvimento Front-End no que se refere à codificação de CSS.

Transcript

1. Aumentando a produtividade com Sass Maximize sua produtividade com Sass: uma extensão do CSS3 com diversos recursos para facilitar a codificação de arquivos CSS e a sua vida como Web Developer!
2. Quem? Arthur Gouveia Full Stack Web Developer & Co-Founder @ Papagaio Web: http://arthurgouveia.com Twitter: @ArthurGouveia Gmail: arthur.gouveia@gmail.com Skype: arthur.gouveia GitHub: ArthurGouveia http://papaga.io
3. Agenda 1.  O que é Sass? 2.  Instalação e setup 3.  Comentários 4.  Imports 5.  Nesting 6.  Variáveis 7.  Mixins 8.  Extends 9.  Controles de fluxo 10.  Operações
4. O que é Sass? Syntactically
5. O que é Sass? Syntactically Awesome
6. O que é Sass? Syntactically Awesome Stylesheets
7. O que é Sass? Pré-processador CSS que facilita a escrita de Stylesheets adicionando vários novos recursos.
8. O que é Sass? #comofaz! style.scss style.css Sass .scss (Sassy CSS) é a extensão padrão do Sass.! Existe também a extensão .sass, que é semelhante a HAML.!
9. Instalação e setup Pré-requisitos Windows: - Instalar o Linux :P - ou o Ruby (http://rubyinstaller.org/) Linux: - Instalar o Ruby: sudo apt-get install ruby1.9.3 Mac OS X: - Ligar o computador ;)
10. Instalação e setup Instalando Sass! ! !gem install sass" ! Botando pra moer! ! !sass --watch style.scss:style.css"
11. Comentários Diferenças entre os comentários! ! "// Comentários inline são utilizados como helpers apenas! "// para os arquivos Sass não compilados. Não permanecem! "// no .css gerado pós-compilação! ! "/* Comentários assim continuam no .css gerado */!
12. Imports A importância do uso! ! Em CSS, a utilização de @import adiciona maior separação entre seus arquivos CSS, mas não evita a multiplicidade de downloads desses arquivos, em paralelo.!
13. Imports @import url(fonts.css) body { font-size: 72em; font-family: droid_serif, “Comic Sans”; } @font-face { font-family: 'droid_serif'; src: url("droidserif.eot"); … font-weight: normal; font-style: normal; } style.css fonts.css
14. Imports @import url(fonts.css) body { font-size: 72em; font-family: droid_serif, “Comic Sans”; } @font-face { font-family: 'droid_serif'; src: url("droidserif.eot"); … font-weight: normal; font-style: normal; } style.css fonts.css
15. Imports @import url(fonts.css) body { font-size: 72em; font-family: droid_serif, “Comic Sans”; } @font-face { font-family: 'droid_serif'; src: url("droidserif.eot"); … font-weight: normal; font-style: normal; } style.css fonts.css Dois downloads
16. Imports @import “fonts” body { font-size: 72em; font-family: droid_serif, “Comic Sans”; } @font-face { font-family: 'droid_serif'; src: url("droidserif.eot"); … font-weight: normal; font-style: normal; } style.css fonts.css
17. Imports @import “fonts” body { font-size: 72em; font-family: droid_serif, “Comic Sans”; } @font-face { font-family: 'droid_serif'; src: url("droidserif.eot"); … font-weight: normal; font-style: normal; } style.css fonts.css Um download
18. Imports Em Sass, você não precisa adicionar o path para o arquivo CSS desejado, mas apenas o nome do arquivo, sem extensão. Ex.:! ! !@import “fonts”" ! O pré-compilador importa os arquivos desejados e gera apenas um único arquivo com o conteúdo de todos CSSs. Mais organização, praticidade e eficiência. "!
19. Imports style.scss style.css fonts.scss fonts.css Ao importar o arquivo fonts.scss, embora o pré-compilador gere um arquivo único com tudo importado, ele também gera o fonts.css, para o caso de haver alguma outra necessidade específica.
20. Imports 04/10 Para que não sejam gerados arquivos desnecessários, utilizam-se partials. Adicionando um “_” antes do arquivo e importando do mesmo modo, os CSSs importados não são gerados. style.scss style.css _fonts.scss
21. Nesting .container { color: #c0c0c0; border-bottom: 1px solid #000; } .container h1 { color: #000; font-size: 24px; line-height: 36px; padding: 0 0 5px 0; margin: 0 0 10px 0; } .container h1 .promo { color: #00f; } .container h1.featured { color: #f00; font-size: 30px; line-height: 45px; } style.css Cuma? Sass extende as capacidades de escrita do CSS para que seja possível aninhar regras de acordo com o nível de especificidade dos seletores.
22. Nesting .container { color: #c0c0c0; border-bottom: 1px solid #000; h1 { color: #000; font-size: 24px; line-height: 36px; padding: 0 0 5px 0; margin: 0 0 10px 0; .promo { color: #00f; } &.featured { color: #f00; font-size: 30px; line-height: 45px; } } } .container { color: #c0c0c0; border-bottom: 1px solid #000; } .container h1 { color: #000; font-size: 24px; line-height: 36px; padding: 0 0 5px 0; margin: 0 0 10px 0; } .container h1 .promo { color: #00f; } .container h1.featured { color: #f00; font-size: 30px; line-height: 45px; } style.css style.scss
23. style.css style.scss Nesting .container { color: #c0c0c0; border-bottom: 1px solid #000; h1 { color: #000; font: { size: 24px; family: Impact, sans-serif; weight: bold; } line-height: 36px; padding: 0 0 5px 0; margin: 0 0 10px 0; &.featured { color: #f00; font-size: 30px; line-height: 45px; } } } .container { color: #c0c0c0; border-bottom: 1px solid #000; } .container h1 { color: #000; font-size: 24px; font-family: Impact, sans-serif; font-weight: bold; line-height: 36px; padding: 0 0 5px 0; margin: 0 0 10px 0; } .container h1.featured { color: #f00; font-size: 30px; line-height: 45px; }
24. style.css style.scss Nesting a { color: #f00; text-decoration: none; &:hover { color: #f20; text-decoration: underline; } &:active { color: #000; } } a { color: #f00; text-decoration: none; } a:hover { color: #f20; text-decoration: underline; } a:active { color: #000; }
25. style.css style.scss Nesting .container { width: 960px; margin: 0 auto; .banner { width: 400px; height: 200px; footer & { width: 300px; height: 150px; } } } .container { width: 960px; margin: 0 auto; } .container .banner { width: 400px; height: 200px; } footer .container .banner { width: 300px; height: 150px; }
26. Variáveis $text-color: #666; $font-size: 14px; $link-color: #555; $hover-color: #444; p { color: $text-color; font-size: $font-size; } a { color: $link-color; font-size: $font-size; &:hover { color: $hover-color; } } Sass permite que você defina valores para variáveis e os utilize em vários lugares do seu CSS. style.scss
27. Variáveis $font-size: 14px; @import “text” $font-size: 16px !default; p, span, a { font-size: $font-size; } Default values Através do uso de “!default”, é possível fazer com que esse valor só seja atribuido à variável se a mesma não tiver um valor anterior. _text.scss style.scss
28. Variáveis p, span, a { font-size: 14px; } $font-size: 16px !default; p, span, a { font-size: $font-size; } _text.css style.css
29. Variáveis Tipos Variáveis podem armanezar vários tipos diferentes: $color-one: #FFF; $color-two: red; $color-three: rgba(0, 255, 0, .5); $boolean-false: false; $boolean-true: true; $number-one: 10px; $number-two: 10; $string-one: “Comic Sans”; $string-two: Helvetica; $list-one: sass, scss, css; $list-two: 10px 5px 15px 5px; $null: null
30. Variáveis $link-color: #00f; button { // Reatribuir uma variável dentro de um // escopo muda o valor globalmente $link-color: #0f0; color: $link-color; } a { color: $link-color; // A variável abaixo só fica disponível // dentro do escopo da tag a $hover-color: #0af; &:hover { color: $hover-color; } } button { color: #0f0; } a { color: #0f0; } a:hover { color: #0af; } Escopo style.css style.scss
31. style.css style.scss Variáveis $class-name: myclass; $attr-name: margin-bottom; p.#{$class-name} { #{$attr-name}: 10px; } p.myclass { margin-bottom: 10px; } Interpolation
32. style.css style.scss Mixins @mixin rounded { -webkit-border-radius: 12px; border-radius: 12px; } .promo-box { background: #f00; color: #fff; @include rounded; } .promo-box { background: #c0c0c0; color: #fff; -webkit-border-radius: 12px; border-radius: 12px; }
33. style.css style.scss Mixins @mixin rounded($radius) { -webkit-border-radius: $radius; border-radius: $radius; } .promo-box { background: #f00; color: #fff; @include rounded(10px); } .promo-box { background: #c0c0c0; color: #fff; -webkit-border-radius: 10px; border-radius: 10px; } Mixins com parâmetros
34. style.css style.scss @mixin rounded($radius: 8px) { -webkit-border-radius: $radius; border-radius: $radius; } .promo-box { background: #f00; color: #fff; @include rounded; } .promo-box { background: #c0c0c0; color: #fff; -webkit-border-radius: 8px; border-radius: 8px; } Mixins com parâmetros default Mixins
35. style.css style.scss @mixin p-box($radius, $bg-color) { -webkit-border-radius: $radius; border-radius: $radius; background-color: $bg-color; } .promo-box { color: #fff; @include p-box(10px, #f00); } .promo-box { color: #fff; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f00; } Mixins Mixins com múltiplos parâmetros
36. style.css style.scss @mixin p-box($radius, $bg-color: #00f) { -webkit-border-radius: $radius; border-radius: $radius; background-color: $bg-color; } .promo-box { color: #fff; @include p-box(10px); } .promo-box { color: #fff; -webkit-border-radius: 10px; border-radius: 10px; background-color: #00f; } Mixins com múltiplos parâmetros e default Mixins
37. style.css style.scss @mixin boxshadow($shadows…) { -webkit-box-shadow: $shadows; box-shadow: $shadows; } .promo-box { color: #fff; @include boxshadow( 0px 0px 4px 0px #000, 1px 1px 3px 0px #c0c0c0 ); } .promo-box { color: #fff; -webkit-box-shadow: 0px 0px 4px 0px #000, 1px 1px 3px 0px #c0c0c0; box-shadow: 0px 0px 4px 0px #000, 1px 1px 3px 0px #c0c0c0; } Mixins Mixins com parâmetros de múltiplos valores
38. style.css style.scss Extends .promo-box-main { background: #f00; color: #fff; font-size: 36px; line-height: 48px; box-shadow: 0 0 4px 4px #000; .promo-title { text-decoration: underline; text-transform: uppercase; } } .promo-box-secondary { @extend .promo-box-main; background: #ff0; color: #000; box-shadow: 1px 1px 2px 2px #000; .promo-title { text-decoration: none; } } .promo-box-main, .promo-box-secondary { background: #f00; color: #fff; font-size: 36px; line-height: 48px; box-shadow: 0 0 4px 4px #000; } .promo-box-main .promo-title, .promo-box-secondary .promo-title { text-decoration: underline; text-transform: uppercase; } .promo-box-secondary { background: #ff0; color: #000; box-shadow: 1px 1px 2px 2px #000; } .promo-box-secondary .promo-title { text-decoration: none;}
39. style.css style.scss Controles de fluxo @function fluidify ($target, $container) { @return ($target/$container) * 100%; } #sidebar { width: fluidify(320px, 940px); } #content { width: fluidify(600px, 940px); } #sidebar { width: 34.04255%; } #content { width: 63.82979%; }
40. style.css style.scss $headings: 1 2 3 4 5 6; @each $heading in $headings { h#{$heading} { font-size: 50px - ($heading * 5px); } } h1 { font-size: 45px; } h2 { font-size: 40px; } h3 { font-size: 35px; } h4 { font-size: 30px; } h5 { font-size: 25px; } h6 { font-size: 20px; } Controles de fluxo
41. style.css style.scss $headings: 1 2 3 4 5 6; @for $i from 1 to 7 { h#{$i} { font-size: 50px - ($i* 5px); } } Controles de fluxo h1 { font-size: 45px; } h2 { font-size: 40px; } h3 { font-size: 35px; } h4 { font-size: 30px; } h5 { font-size: 25px; } h6 { font-size: 20px; }
42. style.css style.scss $headings: 1 2 3 4 5 6; $i: 1; @while $i <= 6 { h#{$i} { font-size: 50px - ($i* 5px); } $i: $i + 1; } Controles de fluxo h1 { font-size: 45px; } h2 { font-size: 40px; } h3 { font-size: 35px; } h4 { font-size: 30px; } h5 { font-size: 25px; } h6 { font-size: 20px; }
43. style.css style.scss $headings: 1 2 3 4 5 6; $i: 1; @while $i <= 6 { h#{$i} { font-size: 50px - ($i* 5px); @if $i == 1 { text-transform: uppercase; } @else if $i == 2 { border-bottom: 1px solid red; } @else { color: #666; } } $i: $i + 1; } h1 { font-size: 45px; text-transform: uppercase; } h2 { font-size: 40px; border-bottom: 1px solid red; } h3 { font-size: 35px;} h4 { font-size: 30px;} h5 { font-size: 25px;} h6 { font-size: 20px;} Controles de fluxo
44. style.css style.scss Operações $base-color: #3B5998; a { color: $base-color; &.darker { color: darken($base-color, 25%); } &.lighter { color: lighten($base-color, 25%); } &.gray { color: grayscale($base-color); } &.opposite { color: invert($base-color); } &.transparent { background-color: rgba($base-color, 0.5); } } a { color: #3b5998; } a.darker { color: #17233c; } a.lighter { color: #839ccf; } a.gray { color: #6a6a6a; } a.opposite { color: #c4a667; } a.transparent { background-color: rgba(59, 89, 152, 0.5); }
45. style.css style.scss Operações $base-radius: 12.34px; div { box-radius: $base-radius; &.round{ box-radius: round($base-radius); } &.ceil{ box-radius: ceil($base-radius); } &.floor{ box-radius: floor($base-radius); } &.abs{ box-radius: abs($base-radius); } } div { box-radius: 12.34px; } div.round { box-radius: 12px; } div.ceil { box-radius: 13px; } div.floor { box-radius: 12px; } div.abs { box-radius: 12.34px; }
46. Considerações finais Sass não faz mágica: CSS ruim continua ruim com Sass.
47. Considerações finais Sass não faz mágica: Sempre verifique o CSS gerado.
48. Considerações finais Invista tempo em aprender agora e recupere facilmente mais tarde.
49. Considerações finais Mixins são para conjuntos de propriedades semelhantes mas com pequenas variações.
50. Considerações finais Cuidado com os níveis de especificidade de seus Nestings. Não ultrapasse 4 níveis de profundidade e economize na Neosaldina
51. Considerações finais Use extend para seletores com propriedades idênticas.
52. Considerações finais Abuse das funções pre-definidas e não re-invente a roda.
53. Considerações finais Leia a documentação completa. Leia a documentação completa.
54. Referências http://sass-lang.com/docs/yardoc/ file.SASS_REFERENCE.html
55. Sugestões bibliográficas http://sass-lang.com/tutorial.html
56. Dúvidas? ?
57. Obrigado!