pré-processadores de                                  css e ferramentas                                  Kenji Yamamoto   ...
pré-processadores de                                  css e ferramentas                                  Kenji Yamamoto   ...
sexta-feira, 5 de outubro de 12
Cronograma           •Fraquezas  do CSS           •Caracteristicas dos Pré-processadores           •Ferramentas gráficas   ...
sexta-feira, 5 de outubro de 12
3 grandes fraquezas do CSS           •Falta de recursos essenciais básicos             ex.: variáveis ou operadores matemá...
3 grandes fraquezas do CSS           •Falta de recursos essenciais básicos             ex.: variáveis ou operadores matemá...
3 grandes fraquezas do CSS           •Falta de recursos essenciais básicos             ex.: variáveis ou operadores matemá...
sexta-feira, 5 de outubro de 12
Fraquezas do CSSsexta-feira, 5 de outubro de 12
Fraquezas do CSSsexta-feira, 5 de outubro de 12
Fraquezas do CSSsexta-feira, 5 de outubro de 12
Fraquezas do CSSsexta-feira, 5 de outubro de 12
sexta-feira, 5 de outubro de 12
Trabalhar com multiplos CSS           •Essencial             para a manutenção.sexta-feira, 5 de outubro de 12
Trabalhar com multiplos CSS           •Essencial               para a manutenção.           •Facilita              o traba...
Trabalhar com multiplos CSS           •Essencial               para a manutenção.           •Facilita              o traba...
Trabalhar com multiplos CSS           •Essencial               para a manutenção.           •Facilita              o traba...
sexta-feira, 5 de outubro de 12
Pré-processadores de CSSsexta-feira, 5 de outubro de 12
Pré-processadores de CSSsexta-feira, 5 de outubro de 12
Caracteristicassexta-feira, 5 de outubro de 12
Caracteristicas           •Compatibilidade          entre Less, Sass e Stylussexta-feira, 5 de outubro de 12
Caracteristicas           •Compatibilidade                 entre Less, Sass e Stylus           •Não                   aume...
Caracteristicas           •Compatibilidade                 entre Less, Sass e Stylus           •Não                   aume...
Sintaxesexta-feira, 5 de outubro de 12
Sintaxe                Sass & LESS                        // style.scss or style.less                        .glb-conteudo...
Sintaxe                Sass & LESS                        // style.scss or style.less                        .glb-conteudo...
Sintaxe de variáveissexta-feira, 5 de outubro de 12
Sintaxe de variáveis                        $minha_cor: #0000FF; // Sass                        @minha_cor: #0000FF; // Le...
Variáveissexta-feira, 5 de outubro de 12
Variáveis                Tipos de variáveis                        $fonts: Helvetica, Arial, sans-serif;                  ...
Operadores e Funcõessexta-feira, 5 de outubro de 12
Operadores e Funcões                Matemáticos e operações com cor                        width: 25px * 4 + 100px / 2 - 5...
Operadores e Funcões                Matemáticos e operações com cor                        width: 25px * 4 + 100px / 2 - 5...
Mixinssexta-feira, 5 de outubro de 12
Mixins                Qual a diferença entre função e mixins ?sexta-feira, 5 de outubro de 12
Mixins                Qual a diferença entre função e mixins ?                • Função retorna um valor processado        ...
Mixins                Qual a diferença entre função e mixins ?                • Função retorna um valor processado        ...
Aninhamentosexta-feira, 5 de outubro de 12
Aninhamento                        .glb-bloco {                          .glb-conteudo {                          }       ...
Herançasexta-feira, 5 de outubro de 12
Herança                CSS padrão                        p,ul,li {                          margin: 10px; padding: 5px;   ...
Herança                CSS padrão                        p,ul,li {                          margin: 10px; padding: 5px;   ...
Herança                CSS padrão                        p,ul,li {                          margin: 10px; padding: 5px;   ...
3 grandes fraquezas do CSS           •Falta de recursos essenciais básicos             ex.: variáveis ou operadores matemá...
Imports e minificaçãosexta-feira, 5 de outubro de 12
Imports e minificação                @import não tem custos de performance                        @import “colors.css”;    ...
Erros Comunssexta-feira, 5 de outubro de 12
Erros Comuns           •Preciso               de Ruby ou NodeJS no backend.sexta-feira, 5 de outubro de 12
Erros Comuns           •Preciso     de Ruby ou NodeJS no backend.                 •Sass é escrito em Ruby                 ...
Erros Comuns           •Preciso     de Ruby ou NodeJS no backend.                 •Sass é escrito em Ruby                 ...
Erros Comuns           •Preciso     de Ruby ou NodeJS no backend.                 •Sass é escrito em Ruby                 ...
Erros Comunssexta-feira, 5 de outubro de 12
Erros Comuns           •Difícil               instalação (ruby ou node)sexta-feira, 5 de outubro de 12
Erros Comuns           •Difícil                instalação (ruby ou node)                                  Ruby já vem pré-...
sexta-feira, 5 de outubro de 12
? ??? ?sexta-feira, 5 de outubro de 12                                  ?
? ??  ?                                  Qual escolher ??sexta-feira, 5 de outubro de 12                                  ...
Qual escolher ?sexta-feira, 5 de outubro de 12
Qual escolher ?           Justificativa fraca             •Sintaxe parecida com o CSS padrãosexta-feira, 5 de outubro de 12
Qual escolher ?           Justificativa fraca             •Sintaxe parecida com o CSS padrão             •Twitter Bootstrap...
Qual escolher ?           Justificativa fraca             •Sintaxe parecida com o CSS padrão             •Twitter Bootstrap...
Qual escolher ?           Justificativa fraca             •Sintaxe parecida com o CSS padrão             •Twitter Bootstrap...
Qual escolher ?           Justificativa fraca             •Sintaxe parecida com o CSS padrão             •Twitter Bootstrap...
Qual escolher ?           Justificativa fraca             •Sintaxe parecida com o CSS padrão             •Twitter Bootstrap...
Qual escolher ?           Justificativa fraca             •Sintaxe parecida com o CSS padrão             •Twitter Bootstrap...
SASSsexta-feira, 5 de outubro de 12
SASSsexta-feira, 5 de outubro de 12
SASS             Funcionalidades:              • extend;              • if;              • for;              • function;  ...
SASS             Funcionalidades:              • extend;              • if;              • for;              • function;  ...
Compasssexta-feira, 5 de outubro de 12
Compass           • CSS3           • Reset CSS           • Spriting           • Grids           • Typography           • D...
CSS Spritesexta-feira, 5 de outubro de 12
CSS Spritesexta-feira, 5 de outubro de 12
CSS Sprite                Configuração                        $flags-layout: smart/horizontal/vertical;                    ...
CSS Sprite                Configuração                        $flags-layout: smart/horizontal/vertical;                    ...
CSS Sprite                Configuração                        $flags-layout: smart/horizontal/vertical;                    ...
Cross-browsersexta-feira, 5 de outubro de 12
Cross-browser                Configuração                        .box {                          @include border-radius(5px...
Cross-browser                Configuração                        .box {                          @include border-radius(5px...
Fluxo de trabalhosexta-feira, 5 de outubro de 12
Fluxo de trabalho                Apenas o Sass                        > gem install sass                        > sass --w...
Fluxo de trabalho                Apenas o Sass                        > gem install sass                        > sass --w...
Ferramentas gráficassexta-feira, 5 de outubro de 12
Ferramentas gráficas                                  CodeKit, LiveReload, Less.app, Compass.app,                          ...
Ferramentas gráficassexta-feira, 5 de outubro de 12
Ferramentas gráficassexta-feira, 5 de outubro de 12
Ferramentas gráficas                                       CodeKit - $25sexta-feira, 5 de outubro de 12
Editores e IDEssexta-feira, 5 de outubro de 12
Editores e IDEs           Com suporte ao Sass, Less, Stylus               VIM, Emacs, Sublime Text 2, TextMate, Eclipse, N...
Estrutura de um projetosexta-feira, 5 de outubro de 12
Estrutura de um projeto                scss/                                css/                  global.scss             ...
Estrutura de um projetosexta-feira, 5 de outubro de 12
Estrutura de um projeto                  config.rb                        css_dir = "static/globoesporte/css/comum"        ...
Técnicas de usosexta-feira, 5 de outubro de 12
Técnicas de uso                Conversões                De pixel para “em”                        font-size: (18px / $con...
Técnicas de uso                Conversões                De pixel para “em”                        font-size: (18px / $con...
Técnicas de usosexta-feira, 5 de outubro de 12
Técnicas de uso                Aninhamento e Media Queries                        .glb-menu {                          dis...
Projeto: Mobile Firstsexta-feira, 5 de outubro de 12
Projeto: Mobile Firstsexta-feira, 5 de outubro de 12
Projeto: Mobile Firstsexta-feira, 5 de outubro de 12
Projeto: Mobile First                Browser modernos                        // modern.scss                        @import...
Projeto: Mobile First                Browser modernos                        // modern.scss                        @import...
Projeto: Mobile First                Browser modernos                        // modern.scss                        @import...
Projeto: Mobile First                Browser modernos                        // modern.scss                        @import...
Técnicas de usosexta-feira, 5 de outubro de 12
Técnicas de uso                Aninhamento com Modernizr e IE                        .glb-menu {                          ...
Debuggingsexta-feira, 5 de outubro de 12
Debugging                  Modo Debug                        > sass --watch <path> --debug-infosexta-feira, 5 de outubro d...
Debugging                  Modo Debug                        > sass --watch <path> --debug-info                Plugins: Fi...
Debugging                  Modo Debug                        > sass --watch <path> --debug-info                Plugins: Fi...
sexta-feira, 5 de outubro de 12
Independente de qual for a sua                          escolha, os pré-processadores de CSS                          estã...
kenjiyamamoto.com                                   kenji@corp.globo.com                                   @kenjiyamamotos...
SASS / COMPASS                                   http://sass-lang.com/                                   http://thesassway...
Upcoming SlideShare
Loading in...5
×

Pre-processadores CSS e Ferramentas gráficas

2,007

Published on

Uma apresentação feita para a Globo.com sobre Pré-processadores de CSS e Ferramentas Gráficas.

6 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,007
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
50
Comments
6
Likes
5
Embeds 0
No embeds

No notes for slide

Pre-processadores CSS e Ferramentas gráficas

  1. 1. pré-processadores de css e ferramentas Kenji Yamamoto @kenjiyamamotosexta-feira, 5 de outubro de 12
  2. 2. pré-processadores de css e ferramentas Kenji Yamamoto @kenjiyamamotosexta-feira, 5 de outubro de 12
  3. 3. sexta-feira, 5 de outubro de 12
  4. 4. Cronograma •Fraquezas do CSS •Caracteristicas dos Pré-processadores •Ferramentas gráficas •Plugins •Erros comuns •Técnicas e Fluxos de trabalhosexta-feira, 5 de outubro de 12
  5. 5. sexta-feira, 5 de outubro de 12
  6. 6. 3 grandes fraquezas do CSS •Falta de recursos essenciais básicos ex.: variáveis ou operadores matemáticassexta-feira, 5 de outubro de 12
  7. 7. 3 grandes fraquezas do CSS •Falta de recursos essenciais básicos ex.: variáveis ou operadores matemáticas •Dificuldade de manutençãosexta-feira, 5 de outubro de 12
  8. 8. 3 grandes fraquezas do CSS •Falta de recursos essenciais básicos ex.: variáveis ou operadores matemáticas •Dificuldade de manutenção •Repetições do mesmo códigosexta-feira, 5 de outubro de 12
  9. 9. sexta-feira, 5 de outubro de 12
  10. 10. Fraquezas do CSSsexta-feira, 5 de outubro de 12
  11. 11. Fraquezas do CSSsexta-feira, 5 de outubro de 12
  12. 12. Fraquezas do CSSsexta-feira, 5 de outubro de 12
  13. 13. Fraquezas do CSSsexta-feira, 5 de outubro de 12
  14. 14. sexta-feira, 5 de outubro de 12
  15. 15. Trabalhar com multiplos CSS •Essencial para a manutenção.sexta-feira, 5 de outubro de 12
  16. 16. Trabalhar com multiplos CSS •Essencial para a manutenção. •Facilita o trabalho colaborativo.sexta-feira, 5 de outubro de 12
  17. 17. Trabalhar com multiplos CSS •Essencial para a manutenção. •Facilita o trabalho colaborativo. •Requer uma organização colaborativa.sexta-feira, 5 de outubro de 12
  18. 18. Trabalhar com multiplos CSS •Essencial para a manutenção. •Facilita o trabalho colaborativo. •Requer uma organização colaborativa. •Precisamos otimizar esse fluxo de trabalho.sexta-feira, 5 de outubro de 12
  19. 19. sexta-feira, 5 de outubro de 12
  20. 20. Pré-processadores de CSSsexta-feira, 5 de outubro de 12
  21. 21. Pré-processadores de CSSsexta-feira, 5 de outubro de 12
  22. 22. Caracteristicassexta-feira, 5 de outubro de 12
  23. 23. Caracteristicas •Compatibilidade entre Less, Sass e Stylussexta-feira, 5 de outubro de 12
  24. 24. Caracteristicas •Compatibilidade entre Less, Sass e Stylus •Não aumenta a capacidade do CSSsexta-feira, 5 de outubro de 12
  25. 25. Caracteristicas •Compatibilidade entre Less, Sass e Stylus •Não aumenta a capacidade do CSS •Melhora o fluxo de trabalhosexta-feira, 5 de outubro de 12
  26. 26. Sintaxesexta-feira, 5 de outubro de 12
  27. 27. Sintaxe Sass & LESS // style.scss or style.less .glb-conteudo { margin: 0 auto; } // style.sass .glb-conteudo margin: 0 auto;sexta-feira, 5 de outubro de 12
  28. 28. Sintaxe Sass & LESS // style.scss or style.less .glb-conteudo { margin: 0 auto; } // style.sass .glb-conteudo margin: 0 auto; Stylus // style.styl // style.styl .glb-conteudo { .glb-conteudo margin: 0 auto; margin 0 auto }sexta-feira, 5 de outubro de 12
  29. 29. Sintaxe de variáveissexta-feira, 5 de outubro de 12
  30. 30. Sintaxe de variáveis $minha_cor: #0000FF; // Sass @minha_cor: #0000FF; // Less minha_cor= #0000FF; // Stylus $cor_principal: $minha_cor; h1 { color: $cor_principal; }sexta-feira, 5 de outubro de 12
  31. 31. Variáveissexta-feira, 5 de outubro de 12
  32. 32. Variáveis Tipos de variáveis $fonts: Helvetica, Arial, sans-serif; $img_path: “../img/”; $font-size: 12px; $margin: 20px; $width: 100px;sexta-feira, 5 de outubro de 12
  33. 33. Operadores e Funcõessexta-feira, 5 de outubro de 12
  34. 34. Operadores e Funcões Matemáticos e operações com cor width: 25px * 4 + 100px / 2 - 50px; // = 100px color: #990033 + #666666; // = #FF66CCsexta-feira, 5 de outubro de 12
  35. 35. Operadores e Funcões Matemáticos e operações com cor width: 25px * 4 + 100px / 2 - 50px; // = 100px color: #990033 + #666666; // = #FF66CC Funcões para cores $azul_claro: lighten($meu_azul, 20%) $azul_gremio: saturate($meu_azul, 50%)sexta-feira, 5 de outubro de 12
  36. 36. Mixinssexta-feira, 5 de outubro de 12
  37. 37. Mixins Qual a diferença entre função e mixins ?sexta-feira, 5 de outubro de 12
  38. 38. Mixins Qual a diferença entre função e mixins ? • Função retorna um valor processado • Mixin retorna código CSSsexta-feira, 5 de outubro de 12
  39. 39. Mixins Qual a diferença entre função e mixins ? • Função retorna um valor processado • Mixin retorna código CSS @mixin border-radius($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .botao { @include border-radius(5px) }sexta-feira, 5 de outubro de 12
  40. 40. Aninhamentosexta-feira, 5 de outubro de 12
  41. 41. Aninhamento .glb-bloco { .glb-conteudo { } } // ======== Output ======== .glb-bloco {} .glb-bloco .glb-conteudo {} .foto { &:hover { } } // ======== Output ======== .foto {} .foto:hover {}sexta-feira, 5 de outubro de 12
  42. 42. Herançasexta-feira, 5 de outubro de 12
  43. 43. Herança CSS padrão p,ul,li { margin: 10px; padding: 5px; }sexta-feira, 5 de outubro de 12
  44. 44. Herança CSS padrão p,ul,li { margin: 10px; padding: 5px; } Sass e Stylus LESS .block { .block { margin: 10px; margin: 10px; padding: 5px; padding: 5px; } } .p { .p { @extend .block; .block; border-color: red; border-color: red; } } .ul, li { .ul, li { @extend .block; .block; overflow: hidden; overflow: hidden; } }sexta-feira, 5 de outubro de 12
  45. 45. Herança CSS padrão p,ul,li { margin: 10px; padding: 5px; } Sass e Stylus LESS .block { .block { margin: 10px; margin: 10px; padding: 5px; padding: 5px; } } .p { .p { @extend .block; .block; border-color: red; border-color: red; } } .ul, li { .ul, li { @extend .block; .block; overflow: hidden; overflow: hidden; } }sexta-feira, 5 de outubro de 12
  46. 46. 3 grandes fraquezas do CSS •Falta de recursos essenciais básicos ex.: variáveis ou operadores matemáticas •Dificuldade de manutenção •Repetições do mesmo códigosexta-feira, 5 de outubro de 12
  47. 47. Imports e minificaçãosexta-feira, 5 de outubro de 12
  48. 48. Imports e minificação @import não tem custos de performance @import “colors.css”; @import “typography.css”; @import “layout.css”; CSS limpos e minificados .glb-block{margin:0 auto;padding: 0;overflow:hidden;}.p{color:#0000FF;margin: 0;padding:0;}sexta-feira, 5 de outubro de 12
  49. 49. Erros Comunssexta-feira, 5 de outubro de 12
  50. 50. Erros Comuns •Preciso de Ruby ou NodeJS no backend.sexta-feira, 5 de outubro de 12
  51. 51. Erros Comuns •Preciso de Ruby ou NodeJS no backend. •Sass é escrito em Ruby •LESS e Stylus são escritos em JSsexta-feira, 5 de outubro de 12
  52. 52. Erros Comuns •Preciso de Ruby ou NodeJS no backend. •Sass é escrito em Ruby •LESS e Stylus são escritos em JS •Ruby e NodeJS em produção.sexta-feira, 5 de outubro de 12
  53. 53. Erros Comuns •Preciso de Ruby ou NodeJS no backend. •Sass é escrito em Ruby •LESS e Stylus são escritos em JS •Ruby e NodeJS em produção. Ambiente de desenvolvimentosexta-feira, 5 de outubro de 12
  54. 54. Erros Comunssexta-feira, 5 de outubro de 12
  55. 55. Erros Comuns •Difícil instalação (ruby ou node)sexta-feira, 5 de outubro de 12
  56. 56. Erros Comuns •Difícil instalação (ruby ou node) Ruby já vem pré-instalado, Node.pkg RubyInstaller.exe, Node.exe apt-get install ruby / nodejssexta-feira, 5 de outubro de 12
  57. 57. sexta-feira, 5 de outubro de 12
  58. 58. ? ??? ?sexta-feira, 5 de outubro de 12 ?
  59. 59. ? ?? ? Qual escolher ??sexta-feira, 5 de outubro de 12 ?
  60. 60. Qual escolher ?sexta-feira, 5 de outubro de 12
  61. 61. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrãosexta-feira, 5 de outubro de 12
  62. 62. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESSsexta-feira, 5 de outubro de 12
  63. 63. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESSsexta-feira, 5 de outubro de 12
  64. 64. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESS •Twitter Bootstrap compilado em Sass !sexta-feira, 5 de outubro de 12
  65. 65. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESS •Twitter Bootstrap compilado em Sass ! Justificativa forte •Funcionalidades disponíveis (Sass e Stylus)sexta-feira, 5 de outubro de 12
  66. 66. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESS •Twitter Bootstrap compilado em Sass ! Justificativa forte •Funcionalidades disponíveis (Sass e Stylus) •Comunidade e documentação (Sass e LESS)sexta-feira, 5 de outubro de 12
  67. 67. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESS •Twitter Bootstrap compilado em Sass ! Justificativa forte •Funcionalidades disponíveis (Sass e Stylus) •Comunidade e documentação (Sass e LESS) •Ruby vs JS, qual sua escolha ?sexta-feira, 5 de outubro de 12
  68. 68. SASSsexta-feira, 5 de outubro de 12
  69. 69. SASSsexta-feira, 5 de outubro de 12
  70. 70. SASS Funcionalidades: • extend; • if; • for; • function; • mixins; • CSS3...sexta-feira, 5 de outubro de 12
  71. 71. SASS Funcionalidades: • extend; • if; • for; • function; • mixins; • CSS3...sexta-feira, 5 de outubro de 12
  72. 72. Compasssexta-feira, 5 de outubro de 12
  73. 73. Compass • CSS3 • Reset CSS • Spriting • Grids • Typography • Data-URLs • Cross-browsersexta-feira, 5 de outubro de 12
  74. 74. CSS Spritesexta-feira, 5 de outubro de 12
  75. 75. CSS Spritesexta-feira, 5 de outubro de 12
  76. 76. CSS Sprite Configuração $flags-layout: smart/horizontal/vertical; @import “flags/*.png”; @include “all-my-flags-sprites”;sexta-feira, 5 de outubro de 12
  77. 77. CSS Sprite Configuração $flags-layout: smart/horizontal/vertical; @import “flags/*.png”; @include “all-my-flags-sprites”; Compilação .argentina,.brasil,chile { background: url(“<path>/flags.png?iu2oi23u234”) no-repeat; } .argentina { background-position: 0 0; } .brasil { background-position: 0 -20px; } .chile { background-position: 0 -40px; }sexta-feira, 5 de outubro de 12
  78. 78. CSS Sprite Configuração $flags-layout: smart/horizontal/vertical; @import “flags/*.png”; @include “all-my-flags-sprites”; Compilação .argentina,.brasil,chile { background: url(“<path>/flags.png?iu2oi23u234”) no-repeat; } .argentina { background-position: 0 0; } .brasil { background-position: 0 -20px; } .chile { background-position: 0 -40px; }sexta-feira, 5 de outubro de 12
  79. 79. Cross-browsersexta-feira, 5 de outubro de 12
  80. 80. Cross-browser Configuração .box { @include border-radius(5px); }sexta-feira, 5 de outubro de 12
  81. 81. Cross-browser Configuração .box { @include border-radius(5px); } Compilação .box { -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }sexta-feira, 5 de outubro de 12
  82. 82. Fluxo de trabalhosexta-feira, 5 de outubro de 12
  83. 83. Fluxo de trabalho Apenas o Sass > gem install sass > sass --watch <path>sexta-feira, 5 de outubro de 12
  84. 84. Fluxo de trabalho Apenas o Sass > gem install sass > sass --watch <path> Sass + Compass > gem install compass > compass create <path> > compass watchsexta-feira, 5 de outubro de 12
  85. 85. Ferramentas gráficassexta-feira, 5 de outubro de 12
  86. 86. Ferramentas gráficas CodeKit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess Compass.app, Scout, Crunchapp, SimpLess, WinLess, LiveReload Compass.app, Scout, Crunchapp, SimpLesssexta-feira, 5 de outubro de 12
  87. 87. Ferramentas gráficassexta-feira, 5 de outubro de 12
  88. 88. Ferramentas gráficassexta-feira, 5 de outubro de 12
  89. 89. Ferramentas gráficas CodeKit - $25sexta-feira, 5 de outubro de 12
  90. 90. Editores e IDEssexta-feira, 5 de outubro de 12
  91. 91. Editores e IDEs Com suporte ao Sass, Less, Stylus VIM, Emacs, Sublime Text 2, TextMate, Eclipse, NetBeans, WebStorm, Visual Studio, Pycharm, RadRails, RubyMine, Komodo, Coda, GEdit...sexta-feira, 5 de outubro de 12
  92. 92. Estrutura de um projetosexta-feira, 5 de outubro de 12
  93. 93. Estrutura de um projeto scss/ css/ global.scss global.css style.scss style.css global/ _colors.scss _helpers.scss _mixins.scss _reset.scss _typography.scss components/ _buttons.scss _popups.scsssexta-feira, 5 de outubro de 12
  94. 94. Estrutura de um projetosexta-feira, 5 de outubro de 12
  95. 95. Estrutura de um projeto config.rb css_dir = "static/globoesporte/css/comum" sass_dir = "static/globoesporte/scss/comum" images_dir = "static/globoesporte/img/comum" javascripts_dir = "static/globoesporte/js/comum" http_path = "/" relative_assets = true # Specify the output style/environment output_style = :expanded environment = :productionsexta-feira, 5 de outubro de 12
  96. 96. Técnicas de usosexta-feira, 5 de outubro de 12
  97. 97. Técnicas de uso Conversões De pixel para “em” font-size: (18px / $context) * 1em // 1.125emsexta-feira, 5 de outubro de 12
  98. 98. Técnicas de uso Conversões De pixel para “em” font-size: (18px / $context) * 1em // 1.125em De pixel para % $ct-width: 1440px; .responsive-grid { width: percentage(200px / $ct-width) margin: percentage(15px / $ct-width) }sexta-feira, 5 de outubro de 12
  99. 99. Técnicas de usosexta-feira, 5 de outubro de 12
  100. 100. Técnicas de uso Aninhamento e Media Queries .glb-menu { display: inline-block; @media screen and (max-width: 480px) { display: block; } } Sass 3.2 - mixin-like .glb-menu { display: inline-block; @media respond-to(small-screen){display: block;} }sexta-feira, 5 de outubro de 12
  101. 101. Projeto: Mobile Firstsexta-feira, 5 de outubro de 12
  102. 102. Projeto: Mobile Firstsexta-feira, 5 de outubro de 12
  103. 103. Projeto: Mobile Firstsexta-feira, 5 de outubro de 12
  104. 104. Projeto: Mobile First Browser modernos // modern.scss @import “base”; @media (min-width: 480px) { @import “480-up” } @media (min-width: 768px) { @import “768-up” } @media (min-width: 1200px) { @import “1200-up” }sexta-feira, 5 de outubro de 12
  105. 105. Projeto: Mobile First Browser modernos // modern.scss @import “base”; @media (min-width: 480px) { @import “480-up” } @media (min-width: 768px) { @import “768-up” } @media (min-width: 1200px) { @import “1200-up” } Internet Explorersexta-feira, 5 de outubro de 12
  106. 106. Projeto: Mobile First Browser modernos // modern.scss @import “base”; @media (min-width: 480px) { @import “480-up” } @media (min-width: 768px) { @import “768-up” } @media (min-width: 1200px) { @import “1200-up” } Internet Explorersexta-feira, 5 de outubro de 12
  107. 107. Projeto: Mobile First Browser modernos // modern.scss @import “base”; @media (min-width: 480px) { @import “480-up” } @media (min-width: 768px) { @import “768-up” } @media (min-width: 1200px) { @import “1200-up” } Internet Explorer // ie.scss @import “base”; @import “480-up”; @import “768-up”;sexta-feira, 5 de outubro de 12
  108. 108. Técnicas de usosexta-feira, 5 de outubro de 12
  109. 109. Técnicas de uso Aninhamento com Modernizr e IE .glb-menu { display: inline-block; .ltie8 & { display: inline; zoom: 1; } } // ======== Output ======== .glb-menu {} .ltie8 .glb-menu {}sexta-feira, 5 de outubro de 12
  110. 110. Debuggingsexta-feira, 5 de outubro de 12
  111. 111. Debugging Modo Debug > sass --watch <path> --debug-infosexta-feira, 5 de outubro de 12
  112. 112. Debugging Modo Debug > sass --watch <path> --debug-info Plugins: Firefox e Chrome • FireSass | FireLESS • Sass Inspectorsexta-feira, 5 de outubro de 12
  113. 113. Debugging Modo Debug > sass --watch <path> --debug-info Plugins: Firefox e Chrome • FireSass | FireLESS • Sass Inspectorsexta-feira, 5 de outubro de 12
  114. 114. sexta-feira, 5 de outubro de 12
  115. 115. Independente de qual for a sua escolha, os pré-processadores de CSS estão aqui para ajudar você a ter um fluxo de trabalho mais organizado e otimizado.sexta-feira, 5 de outubro de 12
  116. 116. kenjiyamamoto.com kenji@corp.globo.com @kenjiyamamotosexta-feira, 5 de outubro de 12 obrigado
  117. 117. SASS / COMPASS http://sass-lang.com/ http://thesassway.com/ LESS http://lesscss.org/ STYLUS http://learnboost.github.com/stylus/ Ferramentas: http://incident57.com/codekit/ http://compass.handlino.com/ http://crunchapp.net/ http://livereload.com/ http://mhs.github.com/scout-app/ Referências: http://css-tricks.com/sass-vs-less/ http://bit.ly/x8BaZysexta-feira, 5 de outubro de 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×