Pre-processadores CSS e Ferramentas gráficas

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