SlideShare a Scribd company logo
1 of 117
Download to read offline
pré-processadores de
                                  css e ferramentas

                                  Kenji Yamamoto
                                   @kenjiyamamoto




sexta-feira, 5 de outubro de 12
pré-processadores de
                                  css e ferramentas

                                  Kenji Yamamoto
                                   @kenjiyamamoto




sexta-feira, 5 de outubro de 12
sexta-feira, 5 de outubro de 12
Cronograma
           •Fraquezas  do CSS
           •Caracteristicas dos Pré-processadores
           •Ferramentas gráficas
           •Plugins
           •Erros comuns
           •Técnicas e Fluxos de trabalho




sexta-feira, 5 de outubro de 12
sexta-feira, 5 de outubro de 12
3 grandes fraquezas do CSS
           •Falta de recursos essenciais básicos
             ex.: variáveis ou operadores matemáticas




sexta-feira, 5 de outubro de 12
3 grandes fraquezas do CSS
           •Falta de recursos essenciais básicos
             ex.: variáveis ou operadores matemáticas

           •Dificuldade            de manutenção




sexta-feira, 5 de outubro de 12
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ódigo




sexta-feira, 5 de outubro de 12
sexta-feira, 5 de outubro de 12
Fraquezas do CSS




sexta-feira, 5 de outubro de 12
Fraquezas do CSS




sexta-feira, 5 de outubro de 12
Fraquezas do CSS




sexta-feira, 5 de outubro de 12
Fraquezas do CSS




sexta-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 trabalho colaborativo.




sexta-feira, 5 de outubro de 12
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
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
sexta-feira, 5 de outubro de 12
Pré-processadores de CSS




sexta-feira, 5 de outubro de 12
Pré-processadores de CSS




sexta-feira, 5 de outubro de 12
Caracteristicas




sexta-feira, 5 de outubro de 12
Caracteristicas
           •Compatibilidade          entre Less, Sass e Stylus




sexta-feira, 5 de outubro de 12
Caracteristicas
           •Compatibilidade                 entre Less, Sass e Stylus
           •Não                   aumenta a capacidade do CSS




sexta-feira, 5 de outubro de 12
Caracteristicas
           •Compatibilidade                 entre Less, Sass e Stylus
           •Não                   aumenta a capacidade do CSS
           •Melhora                  o fluxo de trabalho




sexta-feira, 5 de outubro de 12
Sintaxe




sexta-feira, 5 de outubro de 12
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
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
Sintaxe de variáveis




sexta-feira, 5 de outubro de 12
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
Variáveis




sexta-feira, 5 de outubro de 12
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
Operadores e Funcões




sexta-feira, 5 de outubro de 12
Operadores e Funcões
                Matemáticos e operações com cor

                        width: 25px * 4 + 100px / 2 - 50px; // = 100px
                        color: #990033 + #666666; // = #FF66CC




sexta-feira, 5 de outubro de 12
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
Mixins




sexta-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
                • Mixin retorna código CSS




sexta-feira, 5 de outubro de 12
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
Aninhamento




sexta-feira, 5 de outubro de 12
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
Herança




sexta-feira, 5 de outubro de 12
Herança
                CSS padrão
                        p,ul,li {
                          margin: 10px; padding: 5px;
                        }




sexta-feira, 5 de outubro de 12
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
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
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ódigo




sexta-feira, 5 de outubro de 12
Imports e minificação




sexta-feira, 5 de outubro de 12
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
Erros Comuns




sexta-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
                 •LESS e Stylus são escritos em JS




sexta-feira, 5 de outubro de 12
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
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 desenvolvimento



sexta-feira, 5 de outubro de 12
Erros Comuns




sexta-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é-instalado, Node.pkg


                                  RubyInstaller.exe, Node.exe


                                  apt-get install ruby / nodejs




sexta-feira, 5 de outubro de 12
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ão




sexta-feira, 5 de outubro de 12
Qual escolher ?
           Justificativa fraca
             •Sintaxe parecida com o CSS padrão
             •Twitter Bootstrap é em LESS




sexta-feira, 5 de outubro de 12
Qual escolher ?
           Justificativa fraca
             •Sintaxe parecida com o CSS padrão
             •Twitter Bootstrap é em LESS




sexta-feira, 5 de outubro de 12
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
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
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
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
SASS




sexta-feira, 5 de outubro de 12
SASS




sexta-feira, 5 de outubro de 12
SASS
             Funcionalidades:
              • extend;
              • if;
              • for;
              • function;
              • mixins;
              • CSS3...




sexta-feira, 5 de outubro de 12
SASS
             Funcionalidades:
              • extend;
              • if;
              • for;
              • function;
              • mixins;
              • CSS3...




sexta-feira, 5 de outubro de 12
Compass




sexta-feira, 5 de outubro de 12
Compass

           • CSS3
           • Reset CSS
           • Spriting
           • Grids
           • Typography
           • Data-URLs
           • Cross-browser


sexta-feira, 5 de outubro de 12
CSS Sprite




sexta-feira, 5 de outubro de 12
CSS Sprite




sexta-feira, 5 de outubro de 12
CSS Sprite
                Configuração
                        $flags-layout: smart/horizontal/vertical;
                        @import “flags/*.png”;
                        @include “all-my-flags-sprites”;




sexta-feira, 5 de outubro de 12
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
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
Cross-browser




sexta-feira, 5 de outubro de 12
Cross-browser
                Configuração
                        .box {
                          @include border-radius(5px);
                        }




sexta-feira, 5 de outubro de 12
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
Fluxo de trabalho




sexta-feira, 5 de outubro de 12
Fluxo de trabalho
                Apenas o Sass

                        > gem install sass
                        > sass --watch <path>




sexta-feira, 5 de outubro de 12
Fluxo de trabalho
                Apenas o Sass

                        > gem install sass
                        > sass --watch <path>




                Sass + Compass

                        > gem install compass
                        > compass create <path>
                        > compass watch




sexta-feira, 5 de outubro de 12
Ferramentas gráficas




sexta-feira, 5 de outubro de 12
Ferramentas gráficas

                                  CodeKit, LiveReload, Less.app, Compass.app,
                                  Scout, Crunchapp, SimpLess


                                  Compass.app, Scout, Crunchapp, SimpLess,
                                  WinLess, LiveReload


                                  Compass.app, Scout, Crunchapp, SimpLess




sexta-feira, 5 de outubro de 12
Ferramentas gráficas




sexta-feira, 5 de outubro de 12
Ferramentas gráficas




sexta-feira, 5 de outubro de 12
Ferramentas gráficas




                                       CodeKit - $25
sexta-feira, 5 de outubro de 12
Editores e IDEs




sexta-feira, 5 de outubro de 12
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
Estrutura de um projeto




sexta-feira, 5 de outubro de 12
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.scss




sexta-feira, 5 de outubro de 12
Estrutura de um projeto




sexta-feira, 5 de outubro de 12
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 = :production




sexta-feira, 5 de outubro de 12
Técnicas de uso




sexta-feira, 5 de outubro de 12
Técnicas de uso
                Conversões
                De pixel para “em”

                        font-size: (18px / $context) * 1em // 1.125em




sexta-feira, 5 de outubro de 12
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
Técnicas de uso




sexta-feira, 5 de outubro de 12
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
Projeto: Mobile First




sexta-feira, 5 de outubro de 12
Projeto: Mobile First




sexta-feira, 5 de outubro de 12
Projeto: Mobile First




sexta-feira, 5 de outubro de 12
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
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




sexta-feira, 5 de outubro de 12
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




sexta-feira, 5 de outubro de 12
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
Técnicas de uso




sexta-feira, 5 de outubro de 12
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
Debugging




sexta-feira, 5 de outubro de 12
Debugging
                  Modo Debug

                        > sass --watch <path> --debug-info




sexta-feira, 5 de outubro de 12
Debugging
                  Modo Debug

                        > sass --watch <path> --debug-info




                Plugins: Firefox e Chrome
                    • FireSass | FireLESS
                    • Sass Inspector




sexta-feira, 5 de outubro de 12
Debugging
                  Modo Debug

                        > sass --watch <path> --debug-info




                Plugins: Firefox e Chrome
                    • FireSass | FireLESS
                    • Sass Inspector




sexta-feira, 5 de outubro de 12
sexta-feira, 5 de outubro de 12
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
kenjiyamamoto.com
                                   kenji@corp.globo.com
                                   @kenjiyamamoto




sexta-feira, 5 de outubro de 12   obrigado
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/x8BaZy

sexta-feira, 5 de outubro de 12

More Related Content

Similar to Pre-processadores CSS e Ferramentas gráficas

Boas práticas de Design em Aplicações Rails
Boas práticas de Design em Aplicações RailsBoas práticas de Design em Aplicações Rails
Boas práticas de Design em Aplicações Railsrinaldifonsecanascimento
 
GUOB 2017 - Extraindo o máximo do Oracle Grid Infrastructure
GUOB 2017 - Extraindo o máximo do Oracle Grid InfrastructureGUOB 2017 - Extraindo o máximo do Oracle Grid Infrastructure
GUOB 2017 - Extraindo o máximo do Oracle Grid InfrastructureFranky Weber Faust
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012André Paulovich
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sérioGabriel Nunes
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASSLarissa Carvalho
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5lucampos_si
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endAnderson Aguiar
 
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Renato Groffe
 
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMWellington Dutra
 
Introducao ao Ruby
Introducao ao RubyIntroducao ao Ruby
Introducao ao RubyKlaus Paiva
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassDanilo Sousa
 
Smacss e-css-faz-bem
Smacss e-css-faz-bemSmacss e-css-faz-bem
Smacss e-css-faz-bemJust Digital
 
Desenvolvimento Front End minicurso UNIDERP 2012
Desenvolvimento Front End minicurso UNIDERP 2012Desenvolvimento Front End minicurso UNIDERP 2012
Desenvolvimento Front End minicurso UNIDERP 2012Anderson de Castro
 

Similar to Pre-processadores CSS e Ferramentas gráficas (20)

Boas práticas de Design em Aplicações Rails
Boas práticas de Design em Aplicações RailsBoas práticas de Design em Aplicações Rails
Boas práticas de Design em Aplicações Rails
 
GUOB 2017 - Extraindo o máximo do Oracle Grid Infrastructure
GUOB 2017 - Extraindo o máximo do Oracle Grid InfrastructureGUOB 2017 - Extraindo o máximo do Oracle Grid Infrastructure
GUOB 2017 - Extraindo o máximo do Oracle Grid Infrastructure
 
Sass - Syntactically Awesome Style Sheets
Sass - Syntactically Awesome Style SheetsSass - Syntactically Awesome Style Sheets
Sass - Syntactically Awesome Style Sheets
 
Less - CSS Dynamic
Less - CSS DynamicLess - CSS Dynamic
Less - CSS Dynamic
 
Workshop DDD
Workshop DDDWorkshop DDD
Workshop DDD
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
 
Não subestime seu css
Não subestime seu cssNão subestime seu css
Não subestime seu css
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sério
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
 
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEM
 
Introducao ao Ruby
Introducao ao RubyIntroducao ao Ruby
Introducao ao Ruby
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
 
Html 5 datainfo
Html 5   datainfoHtml 5   datainfo
Html 5 datainfo
 
Smacss e-css-faz-bem
Smacss e-css-faz-bemSmacss e-css-faz-bem
Smacss e-css-faz-bem
 
Desenvolvimento Front End minicurso UNIDERP 2012
Desenvolvimento Front End minicurso UNIDERP 2012Desenvolvimento Front End minicurso UNIDERP 2012
Desenvolvimento Front End minicurso UNIDERP 2012
 

Pre-processadores CSS e Ferramentas gráficas

  • 1. pré-processadores de css e ferramentas Kenji Yamamoto @kenjiyamamoto sexta-feira, 5 de outubro de 12
  • 2. pré-processadores de css e ferramentas Kenji Yamamoto @kenjiyamamoto sexta-feira, 5 de outubro de 12
  • 3. sexta-feira, 5 de outubro de 12
  • 4. Cronograma •Fraquezas do CSS •Caracteristicas dos Pré-processadores •Ferramentas gráficas •Plugins •Erros comuns •Técnicas e Fluxos de trabalho sexta-feira, 5 de outubro de 12
  • 5. sexta-feira, 5 de outubro de 12
  • 6. 3 grandes fraquezas do CSS •Falta de recursos essenciais básicos ex.: variáveis ou operadores matemáticas sexta-feira, 5 de outubro de 12
  • 7. 3 grandes fraquezas do CSS •Falta de recursos essenciais básicos ex.: variáveis ou operadores matemáticas •Dificuldade de manutenção sexta-feira, 5 de outubro de 12
  • 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ódigo sexta-feira, 5 de outubro de 12
  • 9. sexta-feira, 5 de outubro de 12
  • 10. Fraquezas do CSS sexta-feira, 5 de outubro de 12
  • 11. Fraquezas do CSS sexta-feira, 5 de outubro de 12
  • 12. Fraquezas do CSS sexta-feira, 5 de outubro de 12
  • 13. Fraquezas do CSS sexta-feira, 5 de outubro de 12
  • 14. sexta-feira, 5 de outubro de 12
  • 15. Trabalhar com multiplos CSS •Essencial para a manutenção. sexta-feira, 5 de outubro de 12
  • 16. Trabalhar com multiplos CSS •Essencial para a manutenção. •Facilita o trabalho colaborativo. sexta-feira, 5 de outubro de 12
  • 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. 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. sexta-feira, 5 de outubro de 12
  • 23. Caracteristicas •Compatibilidade entre Less, Sass e Stylus sexta-feira, 5 de outubro de 12
  • 24. Caracteristicas •Compatibilidade entre Less, Sass e Stylus •Não aumenta a capacidade do CSS sexta-feira, 5 de outubro de 12
  • 25. Caracteristicas •Compatibilidade entre Less, Sass e Stylus •Não aumenta a capacidade do CSS •Melhora o fluxo de trabalho sexta-feira, 5 de outubro de 12
  • 26. Sintaxe sexta-feira, 5 de outubro de 12
  • 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. 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
  • 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
  • 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
  • 34. Operadores e Funcões Matemáticos e operações com cor width: 25px * 4 + 100px / 2 - 50px; // = 100px color: #990033 + #666666; // = #FF66CC sexta-feira, 5 de outubro de 12
  • 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. Mixins sexta-feira, 5 de outubro de 12
  • 37. Mixins Qual a diferença entre função e mixins ? sexta-feira, 5 de outubro de 12
  • 38. Mixins Qual a diferença entre função e mixins ? • Função retorna um valor processado • Mixin retorna código CSS sexta-feira, 5 de outubro de 12
  • 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
  • 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. Herança sexta-feira, 5 de outubro de 12
  • 43. Herança CSS padrão p,ul,li { margin: 10px; padding: 5px; } sexta-feira, 5 de outubro de 12
  • 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. 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. 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ódigo sexta-feira, 5 de outubro de 12
  • 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. Erros Comuns sexta-feira, 5 de outubro de 12
  • 50. Erros Comuns •Preciso de Ruby ou NodeJS no backend. sexta-feira, 5 de outubro de 12
  • 51. Erros Comuns •Preciso de Ruby ou NodeJS no backend. •Sass é escrito em Ruby •LESS e Stylus são escritos em JS sexta-feira, 5 de outubro de 12
  • 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. 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 desenvolvimento sexta-feira, 5 de outubro de 12
  • 54. Erros Comuns sexta-feira, 5 de outubro de 12
  • 55. Erros Comuns •Difícil instalação (ruby ou node) sexta-feira, 5 de outubro de 12
  • 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 / nodejs sexta-feira, 5 de outubro de 12
  • 57. sexta-feira, 5 de outubro de 12
  • 58. ? ?? ? ? sexta-feira, 5 de outubro de 12 ?
  • 59. ? ?? ? Qual escolher ? ? sexta-feira, 5 de outubro de 12 ?
  • 60. Qual escolher ? sexta-feira, 5 de outubro de 12
  • 61. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão sexta-feira, 5 de outubro de 12
  • 62. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESS sexta-feira, 5 de outubro de 12
  • 63. Qual escolher ? Justificativa fraca •Sintaxe parecida com o CSS padrão •Twitter Bootstrap é em LESS sexta-feira, 5 de outubro de 12
  • 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. 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. 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. 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. SASS sexta-feira, 5 de outubro de 12
  • 69. SASS sexta-feira, 5 de outubro de 12
  • 70. SASS Funcionalidades: • extend; • if; • for; • function; • mixins; • CSS3... sexta-feira, 5 de outubro de 12
  • 71. SASS Funcionalidades: • extend; • if; • for; • function; • mixins; • CSS3... sexta-feira, 5 de outubro de 12
  • 72. Compass sexta-feira, 5 de outubro de 12
  • 73. Compass • CSS3 • Reset CSS • Spriting • Grids • Typography • Data-URLs • Cross-browser sexta-feira, 5 de outubro de 12
  • 74. CSS Sprite sexta-feira, 5 de outubro de 12
  • 75. CSS Sprite sexta-feira, 5 de outubro de 12
  • 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. 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. 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
  • 80. Cross-browser Configuração .box { @include border-radius(5px); } sexta-feira, 5 de outubro de 12
  • 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. Fluxo de trabalho sexta-feira, 5 de outubro de 12
  • 83. Fluxo de trabalho Apenas o Sass > gem install sass > sass --watch <path> sexta-feira, 5 de outubro de 12
  • 84. Fluxo de trabalho Apenas o Sass > gem install sass > sass --watch <path> Sass + Compass > gem install compass > compass create <path> > compass watch sexta-feira, 5 de outubro de 12
  • 86. Ferramentas gráficas CodeKit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess Compass.app, Scout, Crunchapp, SimpLess, WinLess, LiveReload Compass.app, Scout, Crunchapp, SimpLess sexta-feira, 5 de outubro de 12
  • 89. Ferramentas gráficas CodeKit - $25 sexta-feira, 5 de outubro de 12
  • 90. Editores e IDEs sexta-feira, 5 de outubro de 12
  • 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. Estrutura de um projeto sexta-feira, 5 de outubro de 12
  • 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.scss sexta-feira, 5 de outubro de 12
  • 94. Estrutura de um projeto sexta-feira, 5 de outubro de 12
  • 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 = :production sexta-feira, 5 de outubro de 12
  • 96. Técnicas de uso sexta-feira, 5 de outubro de 12
  • 97. Técnicas de uso Conversões De pixel para “em” font-size: (18px / $context) * 1em // 1.125em sexta-feira, 5 de outubro de 12
  • 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. Técnicas de uso sexta-feira, 5 de outubro de 12
  • 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. Projeto: Mobile First sexta-feira, 5 de outubro de 12
  • 102. Projeto: Mobile First sexta-feira, 5 de outubro de 12
  • 103. Projeto: Mobile First sexta-feira, 5 de outubro de 12
  • 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. 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 sexta-feira, 5 de outubro de 12
  • 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 Explorer sexta-feira, 5 de outubro de 12
  • 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. Técnicas de uso sexta-feira, 5 de outubro de 12
  • 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. Debugging sexta-feira, 5 de outubro de 12
  • 111. Debugging Modo Debug > sass --watch <path> --debug-info sexta-feira, 5 de outubro de 12
  • 112. Debugging Modo Debug > sass --watch <path> --debug-info Plugins: Firefox e Chrome • FireSass | FireLESS • Sass Inspector sexta-feira, 5 de outubro de 12
  • 113. Debugging Modo Debug > sass --watch <path> --debug-info Plugins: Firefox e Chrome • FireSass | FireLESS • Sass Inspector sexta-feira, 5 de outubro de 12
  • 114. sexta-feira, 5 de outubro de 12
  • 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. kenjiyamamoto.com kenji@corp.globo.com @kenjiyamamoto sexta-feira, 5 de outubro de 12 obrigado
  • 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/x8BaZy sexta-feira, 5 de outubro de 12