$30 off During Our Annual Pro Sale. View Details »

Aumentando a produtividade com Sass

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.

Arthur Gouveia

November 01, 2012
Tweet

More Decks by Arthur Gouveia

Other Decks in Programming

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!