Post on 11-Jun-2015
description
pré-processadores decss e ferramentas
Kenji Yamamoto@kenjiyamamoto
sexta-feira, 5 de outubro de 12
pré-processadores decss 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
•Erros comuns•Técnicas e Fluxos de trabalho
•Plugins
sexta-feira, 5 de outubro de 12
sexta-feira, 5 de outubro de 12
3 grandes fraquezas do CSS
•Falta de recursos essenciais básicosex.: variáveis ou operadores matemáticas
sexta-feira, 5 de outubro de 12
3 grandes fraquezas do CSS
•Falta de recursos essenciais básicos
•Dificuldade de manutenção
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
•Dificuldade de manutenção
•Repetições do mesmo código
ex.: variáveis ou operadores matemáticas
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
Sass & LESS
Sintaxe
// style.scss or style.less.glb-conteudo {margin: 0 auto;
}
// style.sass.glb-conteudomargin: 0 auto;
sexta-feira, 5 de outubro de 12
Sass & LESS
Stylus
Sintaxe
// style.scss or style.less.glb-conteudo {margin: 0 auto;
}
// style.sass.glb-conteudomargin: 0 auto;
// style.styl.glb-conteudo {margin: 0 auto;
}
// style.styl.glb-conteudomargin 0 auto
sexta-feira, 5 de outubro de 12
Sintaxe de variáveis
sexta-feira, 5 de outubro de 12
$minha_cor: #0000FF; // Sass@minha_cor: #0000FF; // Less minha_cor= #0000FF; // Stylus
$cor_principal: $minha_cor;
h1 {color: $cor_principal;
}
Sintaxe de variáveis
sexta-feira, 5 de outubro de 12
Variáveis
sexta-feira, 5 de outubro de 12
Variáveis
$fonts: Helvetica, Arial, sans-serif;$img_path: “../img/”;$font-size: 12px;$margin: 20px;$width: 100px;
Tipos de variáveis
sexta-feira, 5 de outubro de 12
Operadores e Funcões
sexta-feira, 5 de outubro de 12
width: 25px * 4 + 100px / 2 - 50px; // = 100pxcolor: #990033 + #666666; // = #FF66CC
Matemáticos e operações com cor
Operadores e Funcões
sexta-feira, 5 de outubro de 12
width: 25px * 4 + 100px / 2 - 50px; // = 100pxcolor: #990033 + #666666; // = #FF66CC
Matemáticos e operações com cor
$azul_claro: lighten($meu_azul, 20%)$azul_gremio: saturate($meu_azul, 50%)
Funcões para cores
Operadores e Funcões
sexta-feira, 5 de outubro de 12
Mixins
sexta-feira, 5 de outubro de 12
Qual a diferença entre função e mixins ?
Mixins
sexta-feira, 5 de outubro de 12
• Função retorna um valor processado• Mixin retorna código CSS
Qual a diferença entre função e mixins ?
Mixins
sexta-feira, 5 de outubro de 12
@mixin border-radius($radius: 10px) {-webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;
}
.botao {@include border-radius(5px)
}
• Função retorna um valor processado• Mixin retorna código CSS
Qual a diferença entre função e mixins ?
Mixins
sexta-feira, 5 de outubro de 12
Aninhamento
sexta-feira, 5 de outubro de 12
.glb-bloco {.glb-conteudo {}
}
// ======== Output ========.glb-bloco {}.glb-bloco .glb-conteudo {}
Aninhamento
.foto {&:hover {}
}
// ======== Output ========.foto {}.foto:hover {}
sexta-feira, 5 de outubro de 12
Herança
sexta-feira, 5 de outubro de 12
p,ul,li {margin: 10px; padding: 5px;
}
CSS padrão
Herança
sexta-feira, 5 de outubro de 12
p,ul,li {margin: 10px; padding: 5px;
}
CSS padrão
Sass e Stylus LESS
Herança
.block {margin: 10px;padding: 5px;
}.p {@extend .block;border-color: red;
}.ul, li {@extend .block;overflow: hidden;
}
.block {margin: 10px;padding: 5px;
}.p {.block;border-color: red;
}.ul, li {.block;overflow: hidden;
}
sexta-feira, 5 de outubro de 12
p,ul,li {margin: 10px; padding: 5px;
}
CSS padrão
Sass e Stylus LESS
Herança
.block {margin: 10px;padding: 5px;
}.p {@extend .block;border-color: red;
}.ul, li {@extend .block;overflow: hidden;
}
.block {margin: 10px;padding: 5px;
}.p {.block;border-color: red;
}.ul, li {.block;overflow: hidden;
}
sexta-feira, 5 de outubro de 12
3 grandes fraquezas do CSS
•Falta de recursos essenciais básicos
•Dificuldade de manutenção
•Repetições do mesmo código
ex.: variáveis ou operadores matemáticas
sexta-feira, 5 de outubro de 12
Imports e minificação
sexta-feira, 5 de outubro de 12
@import “colors.css”;@import “typography.css”;@import “layout.css”;
Imports e minificação
.glb-block{margin:0 auto;padding:0;overflow:hidden;}.p{color:#0000FF;margin:0;padding:0;}
@import não tem custos de performance
CSS limpos e minificados
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
•Sass é escrito em Ruby•LESS e Stylus são escritos em JS
•Preciso de Ruby ou NodeJS no backend.
sexta-feira, 5 de outubro de 12
Erros Comuns
•Sass é escrito em Ruby
•Ruby e NodeJS em produção.
•LESS e Stylus são escritos em JS
•Preciso de Ruby ou NodeJS no backend.
sexta-feira, 5 de outubro de 12
Erros Comuns
•Sass é escrito em Ruby
•Ruby e NodeJS em produção.
Ambiente de desenvolvimento
•LESS e Stylus são escritos em JS
•Preciso de Ruby ou NodeJS no backend.
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
SASSFuncionalidades:
• extend;• if;• for ;• function;• mixins;• CSS3...
sexta-feira, 5 de outubro de 12
SASSFuncionalidades:
• extend;• if;• for ;• function;• mixins;• CSS3...
sexta-feira, 5 de outubro de 12
Compass
sexta-feira, 5 de outubro de 12
Compass
• CSS3
• Spriting• Grids• Typography• Data-URLs• Cross-browser
• Reset CSS
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
$flags-layout: smart/horizontal/vertical;@import “flags/*.png”;@include “all-my-flags-sprites”;
CSS SpriteConfiguração
sexta-feira, 5 de outubro de 12
$flags-layout: smart/horizontal/vertical;@import “flags/*.png”;@include “all-my-flags-sprites”;
.argentina,.brasil,chile {background: url(“<path>/flags.png?iu2oi23u234”)
no-repeat;}
Compilação
CSS Sprite
.argentina { background-position: 0 0; }
.brasil { background-position: 0 -20px; }
.chile { background-position: 0 -40px; }
Configuração
sexta-feira, 5 de outubro de 12
$flags-layout: smart/horizontal/vertical;@import “flags/*.png”;@include “all-my-flags-sprites”;
.argentina,.brasil,chile {background: url(“<path>/flags.png?iu2oi23u234”)
no-repeat;}
Compilação
CSS Sprite
.argentina { background-position: 0 0; }
.brasil { background-position: 0 -20px; }
.chile { background-position: 0 -40px; }
Configuração
sexta-feira, 5 de outubro de 12
Cross-browser
sexta-feira, 5 de outubro de 12
Cross-browser
.box {@include border-radius(5px);
}
Configuração
sexta-feira, 5 de outubro de 12
Cross-browser
.box {@include border-radius(5px);
}
.box {-webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px;
}
Configuração
Compilação
sexta-feira, 5 de outubro de 12
Fluxo de trabalho
sexta-feira, 5 de outubro de 12
> gem install sass> sass --watch <path>
Apenas o Sass
Fluxo de trabalho
sexta-feira, 5 de outubro de 12
> gem install sass> sass --watch <path>
Apenas o Sass
> gem install compass> compass create <path>> compass watch
Sass + Compass
Fluxo de trabalho
sexta-feira, 5 de outubro de 12
Ferramentas gráficas
sexta-feira, 5 de outubro de 12
CodeKit, LiveReload, Less.app, Compass.app, Scout, Crunchapp, SimpLess
Compass.app, Scout, Crunchapp, SimpLess, WinLess, LiveReload
Compass.app, Scout, Crunchapp, SimpLess
Ferramentas gráficas
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
Com suporte ao Sass, Less, Stylus
VIM, Emacs, Sublime Text 2, TextMate, Eclipse, NetBeans, WebStorm, Visual Studio, Pycharm, RadRails, RubyMine, Komodo, Coda, GEdit...
Editores e IDEs
sexta-feira, 5 de outubro de 12
Estrutura de um projeto
sexta-feira, 5 de outubro de 12
scss/global.scssstyle.scssglobal/_colors.scss_helpers.scss_mixins.scss_reset.scss_typography.scss
components/_buttons.scss_popups.scss
Estrutura de um projeto
css/global.cssstyle.css
sexta-feira, 5 de outubro de 12
Estrutura de um projeto
sexta-feira, 5 de outubro de 12
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/environmentoutput_style = :expandedenvironment = :production
Estrutura de um projeto
config.rb
sexta-feira, 5 de outubro de 12
Técnicas de uso
sexta-feira, 5 de outubro de 12
Técnicas de uso
font-size: (18px / $context) * 1em // 1.125em
Conversões
De pixel para “em”
sexta-feira, 5 de outubro de 12
Técnicas de uso
font-size: (18px / $context) * 1em // 1.125em
Conversões
De pixel para “em”
$ct-width: 1440px;
.responsive-grid {width: percentage(200px / $ct-width)margin: percentage(15px / $ct-width)
}
De pixel para %
sexta-feira, 5 de outubro de 12
Técnicas de uso
sexta-feira, 5 de outubro de 12
Técnicas de usoAninhamento 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
// 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” }
Browser modernos
Projeto: Mobile First
sexta-feira, 5 de outubro de 12
// 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” }
Browser modernos
Internet Explorer
Projeto: Mobile First
sexta-feira, 5 de outubro de 12
// 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” }
Browser modernos
Internet Explorer
Projeto: Mobile First
sexta-feira, 5 de outubro de 12
// 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” }
// ie.scss@import “base”;@import “480-up”;@import “768-up”;
Browser modernos
Internet Explorer
Projeto: Mobile First
sexta-feira, 5 de outubro de 12
Técnicas de uso
sexta-feira, 5 de outubro de 12
Técnicas de usoAninhamento 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
> sass --watch <path> --debug-info
Modo Debug
Debugging
sexta-feira, 5 de outubro de 12
> sass --watch <path> --debug-info
Plugins: Firefox e Chrome
Modo Debug
• FireSass | FireLESS• Sass Inspector
Debugging
sexta-feira, 5 de outubro de 12
> sass --watch <path> --debug-info
Plugins: Firefox e Chrome
Modo Debug
• FireSass | FireLESS• Sass Inspector
Debugging
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.comkenji@corp.globo.com@kenjiyamamoto
obrigadosexta-feira, 5 de outubro de 12
SASS / COMPASShttp://sass-lang.com/http://thesassway.com/
LESShttp://lesscss.org/
STYLUShttp://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