Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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!

    View full-size slide

  2. Quem?
    Arthur Gouveia
    Full Stack Web Developer &
    Co-Founder @ Papagaio

    Web: http://arthurgouveia.com
    Twitter: @ArthurGouveia
    Gmail: [email protected]
    Skype: arthur.gouveia
    GitHub: ArthurGouveia

    http://papaga.io

    View full-size slide

  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

    View full-size slide

  4. O que é Sass?
    Syntactically

    View full-size slide

  5. O que é Sass?
    Syntactically
    Awesome

    View full-size slide

  6. O que é Sass?
    Syntactically
    Awesome
    Stylesheets

    View full-size slide

  7. O que é Sass?
    Pré-processador CSS que facilita a escrita de Stylesheets
    adicionando vários novos recursos.

    View full-size slide

  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.!

    View full-size slide

  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 ;)

    View full-size slide

  10. Instalação e setup
    Instalando Sass!
    !
    !gem install sass"
    !
    Botando pra moer!
    !
    !sass --watch style.scss:style.css"

    View full-size slide

  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 */!

    View full-size slide

  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.!

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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. "!

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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;
    }

    View full-size slide

  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;
    }

    View full-size slide

  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;
    }

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  28. Variáveis
    p,
    span,
    a {
    font-size: 14px;
    }
    $font-size: 16px !default;

    p,
    span,
    a {
    font-size: $font-size;
    }
    _text.css
    style.css

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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;
    }

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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;}

    View full-size slide

  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%;
    }

    View full-size slide

  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

    View full-size slide

  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;
    }

    View full-size slide

  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;
    }

    View full-size slide

  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

    View full-size slide

  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);
    }

    View full-size slide

  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;
    }

    View full-size slide

  46. Considerações finais
    Sass não faz mágica:
    CSS ruim continua ruim com Sass.

    View full-size slide

  47. Considerações finais
    Sass não faz mágica:
    Sempre verifique o CSS gerado.

    View full-size slide

  48. Considerações finais
    Invista tempo em aprender agora
    e recupere facilmente mais tarde.

    View full-size slide

  49. Considerações finais
    Mixins são para conjuntos de
    propriedades semelhantes
    mas com pequenas variações.

    View full-size slide

  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

    View full-size slide

  51. Considerações finais
    Use extend para seletores com
    propriedades idênticas.

    View full-size slide

  52. Considerações finais
    Abuse das funções pre-definidas
    e não re-invente a roda.

    View full-size slide

  53. Considerações finais
    Leia a documentação completa.
    Leia a documentação completa.

    View full-size slide

  54. Referências
    http://sass-lang.com/docs/yardoc/
    file.SASS_REFERENCE.html

    View full-size slide

  55. Sugestões bibliográficas
    http://sass-lang.com/tutorial.html

    View full-size slide