O documento discute pré-processadores CSS e ferramentas. Ele aborda as fraquezas do CSS, características e sintaxes de pré-processadores como Sass, Less e Stylus, além de conceitos como variáveis, mixins, imports e sprites. O documento também trata de erros comuns e ferramentas como Compass.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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