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



Cronograma•Fraquezas do CSS•Caracteristicas dos Pré-processadores•Ferramentas gráficas

•Erros comuns•Técnicas e Fluxos de trabalho

•Plugins



3 grandes fraquezas do CSS

•Falta de recursos essenciais básicosex.: variáveis ou operadores matemáticas



•Falta de recursos essenciais básicos

•Dificuldade de manutenção

ex.: variáveis ou operadores matemáticas





•Repetições do mesmo código




Fraquezas do CSS


Fraquezas do CSS


Fraquezas do CSS


Fraquezas do CSS



Trabalhar com multiplos CSS

•Essencial para a manutenção.



•Essencial para a manutenção.•Facilita o trabalho colaborativo.



•Essencial para a manutenção.•Facilita o trabalho colaborativo.•Requer uma organização colaborativa.



•Essencial para a manutenção.•Facilita o trabalho colaborativo.•Requer uma organização colaborativa.

•Precisamos otimizar esse fluxo de trabalho.



Pré-processadores de CSS


Pré-processadores de CSS


Caracteristicas


Caracteristicas•Compatibilidade entre Less, Sass e Stylus


Caracteristicas•Compatibilidade entre Less, Sass e Stylus•Não aumenta a capacidade do CSS


Caracteristicas•Compatibilidade entre Less, Sass e Stylus•Não aumenta a capacidade do CSS•Melhora o fluxo de trabalho


Sintaxe


Sass & LESS

Sintaxe

// style.scss or style.less.glb-conteudo {margin: 0 auto;

}

// style.sass.glb-conteudomargin: 0 auto;


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


Sintaxe de variáveis


$minha_cor: #0000FF; // Sass@minha_cor: #0000FF; // Less minha_cor= #0000FF; // Stylus

$cor_principal: $minha_cor;

h1 {color: $cor_principal;

}

Sintaxe de variáveis


Variáveis


Variáveis

$fonts: Helvetica, Arial, sans-serif;$img_path: “../img/”;$font-size: 12px;$margin: 20px;$width: 100px;

Tipos de variáveis


Operadores e Funcões


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

Matemáticos e operações com cor



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



Mixins


Qual a diferença entre função e mixins ?

Mixins


• Função retorna um valor processado• Mixin retorna código CSS


Mixins


@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


Mixins


Aninhamento


.glb-bloco {.glb-conteudo {}

}

// ======== Output ========.glb-bloco {}.glb-bloco .glb-conteudo {}

Aninhamento

.foto {&:hover {}

}

// ======== Output ========.foto {}.foto:hover {}


Herança


p,ul,li {margin: 10px; padding: 5px;

}

CSS padrão

Herança



}

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;

}


}.p {.block;border-color: red;

}.ul, li {.block;overflow: hidden;

}



}

CSS padrão

Sass e Stylus LESS

Herança


}.p {@extend .block;border-color: red;

}.ul, li {@extend .block;overflow: hidden;

}


}.p {.block;border-color: red;

}.ul, li {.block;overflow: hidden;

}





•Repetições do mesmo código



Imports e minificação


@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


Erros Comuns


Erros Comuns•Preciso de Ruby ou NodeJS no backend.


Erros Comuns

•Sass é escrito em Ruby•LESS e Stylus são escritos em JS

•Preciso de Ruby ou NodeJS no backend.


Erros Comuns

•Sass é escrito em Ruby

•Ruby e NodeJS em produção.

•LESS e Stylus são escritos em JS



Erros Comuns

•Sass é escrito em Ruby

•Ruby e NodeJS em produção.

Ambiente de desenvolvimento

•LESS e Stylus são escritos em JS



Erros Comuns


Erros Comuns•Difícil instalação (ruby ou node)


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



????

??


????

??Qual escolher ?


Qual escolher ?


Qual escolher ?

Justificativa fraca•Sintaxe parecida com o CSS padrão


Qual escolher ?

Justificativa fraca•Sintaxe parecida com o CSS padrão•Twitter Bootstrap é em LESS


Qual escolher ?

Justificativa fraca•Sintaxe parecida com o CSS padrão•Twitter Bootstrap é em LESS


Qual escolher ?

Justificativa fraca•Sintaxe parecida com o CSS padrão•Twitter Bootstrap é em LESS•Twitter Bootstrap compilado em Sass !


Qual escolher ?


Justificativa forte•Funcionalidades disponíveis (Sass e Stylus)


Qual escolher ?


Justificativa forte•Funcionalidades disponíveis (Sass e Stylus)•Comunidade e documentação (Sass e LESS)


Qual escolher ?


Justificativa forte•Funcionalidades disponíveis (Sass e Stylus)•Comunidade e documentação (Sass e LESS)•Ruby vs JS, qual sua escolha ?


SASS


SASS


SASSFuncionalidades:

• extend;• if;• for ;• function;• mixins;• CSS3...


SASSFuncionalidades:

• extend;• if;• for ;• function;• mixins;• CSS3...


Compass


Compass

• CSS3

• Spriting• Grids• Typography• Data-URLs• Cross-browser

• Reset CSS


CSS Sprite


CSS Sprite


$flags-layout: smart/horizontal/vertical;@import “flags/*.png”;@include “all-my-flags-sprites”;

CSS SpriteConfiguração



.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



.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


Cross-browser


Cross-browser

.box {@include border-radius(5px);

}

Configuração


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


Fluxo de trabalho


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

Apenas o Sass

Fluxo de trabalho


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

Apenas o Sass

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

Sass + Compass

Fluxo de trabalho


Ferramentas gráficas


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

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

Compass.app, Scout, Crunchapp, SimpLess








CodeKit - $25


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

Editores e IDEs


Estrutura de um projeto


scss/global.scssstyle.scssglobal/_colors.scss_helpers.scss_mixins.scss_reset.scss_typography.scss

components/_buttons.scss_popups.scss


css/global.cssstyle.css




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


config.rb


Técnicas de uso


Técnicas de uso

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

Conversões

De pixel para “em”


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 %


Técnicas de uso


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

}


Projeto: Mobile First






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




Browser modernos

Internet Explorer




Browser modernos

Internet Explorer




// ie.scss@import “base”;@import “480-up”;@import “768-up”;

Browser modernos

Internet Explorer



Técnicas de uso


Técnicas de usoAninhamento com Modernizr e IE

.glb-menu {display: inline-block;

.ltie8 & {display: inline;zoom: 1;

}}

// ======== Output ========.glb-menu {}.ltie8 .glb-menu {}


Debugging


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

Modo Debug

Debugging



Plugins: Firefox e Chrome

Modo Debug

• FireSass | FireLESS• Sass Inspector

Debugging



Plugins: Firefox e Chrome

Modo Debug

• FireSass | FireLESS• Sass Inspector

Debugging



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.


[email protected]@kenjiyamamoto

obrigadosexta-feira, 5 de outubro de 12

mailto:[email protected]


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




http://sass-lang.com/

http://sass-lang.com/

http://thesassway.com/

http://thesassway.com/

http://lesscss.org/

http://lesscss.org/

http://learnboost.github.com/stylus/


http://incident57.com/codekit/

http://incident57.com/codekit/

http://compass.handlino.com/

http://compass.handlino.com/

http://crunchapp.net/

http://crunchapp.net/

http://livereload.com/

http://livereload.com/

http://mhs.github.com/scout-app/

http://mhs.github.com/scout-app/





Documents

Pre-processadores CSS e Ferramentas gráficas