Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Componetização de CSS
com Compass / Sass
Guilherme Serrano
Quem?
Guilherme Serrano (@gserrano)
Web developer

Graduado em design (ui ui ui)
Pós graduando em gestão empreendedora
Dev...
“

Se você faz sites grandes usando
CSS, já deve ter notado que chega
uma etapa do trabalho que se não
prestar a atenção d...
CSS Modular
CSS Modular
- Grid
CSS Modular
- Grid
- Usar herança de verdade
CSS Modular
- Grid
- Usar herança de verdade
- Organização
CSS Modular
- Grid
- Usar herança de verdade
- Organização
- Manutenção
CSS Modular
- Grid
- Usar herança de verdade
- Organização
- Manutenção
- Facilidade de customização
Componentes?
Componentes?
Componentes?
Componentes?
Compass
- Reset
- Math
- Selector
- Images

- Helpers
- Colors
- Sprites
Variáveis
no Compass (sass)
Variáveis no Compass
Variáveis no Compass
$main-color: #333;
$secondary-color: red;
Variáveis no Compass
$main-color: #333;
$secondary-color: red;
.products{
border-color: $secondary-color;
color: $main-col...
Variáveis no Compass
$main-color: #333;
$secondary-color: red;
.products{
border-color: $secondary-color;
color: $main-col...
Variáveis no Compass
@import "compass/css3";
$primary-font: verdana;
$box-padding: 5px;
$border-radius: 4px;
.features{
@i...
Resultado
.features {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
...
Tipografia
Cores
Imagens
Espaçamentos
Includes
Includes no Compass
- sass
- _componentes
- componente.scss
screen.scss
Includes no Compass
screen.scss
@import "_componentes/componente";
É include de CSS?
Arquitetura
de front-end
componentes em projetos
utilizando templates
Portal
CMS
E-commerce
Intranet
Sistemas web
Templates
Wordpress
Bootstrap
etc
Pense antes de fazer
Pense nas variáveis
exigidas pelo design
Negocie com
o designer
Pense na
Estrutura de arquivos
e adapte a sua necessidade
projeto
_componentes
04_produto.scss
06_lista-chamada.scss
12_noticia.scss
..
eucompraria
images
sprite.png
..
style.scss
...
projeto
_componentes
04_produto.scss
06_lista-chamada.scss
12_noticia.scss
..
eucompraria
images
sprite.png
..
style.scss
...
projeto
_componentes
04_produto.scss
06_lista-chamada.scss
12_noticia.scss
..
eucompraria
images
sprite.png
..
style.scss
...
screen.scss
@import "compass/css3";
@import "compass/utilities";
$primary-font: verdana;
$box-padding: 5px;
$border-radius...
natal.scss
@import "compass/css3";
@import "compass/utilities";
$primary-font: “Comic Sans”;
$box-padding: 5px;
$border-ra...
CSS de
3 mil linhas
Agora são menos de 500 linhas
O canal Esporte
vai mudar a tipografia!
3 minutos para fazer
O Daniel Filho exigiu
o componente de
calendário na intranet
do ZOFE
Sexta, 14h, precisa ser hoje
Meu componente tem variáveis que o template
ainda não tem.
E agora?
O compass não
compila
E mantém a qualidade do seu código!
Refactoring de CSS
Acabaram as desculpas para
deixar código legado
+ produtividade
+ produtividade
=
+ tempo estudando
(zofe, loop infinito, tableless, o desenvolvedor…)
+ produtividade
=
+ tempo estudando
(zofe, loop infinito, tableless, o desenvolvedor…)

=
+ produtividade
Foto por @torresfelipe
Inovem sem moderação
Obrigado
@gserrano
contato@guilhermeserrano.com.br
http://andafter.org
http://eucompraria.com.br
http://gssolutions.com.br
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Upcoming SlideShare
Loading in …5
×

Componetização de CSS com o Compass (Front in Sampa 2013)

3,143 views

Published on

Palestra sobre componetização de CSS utilizando Compass, realizada no Front in Sampa 2013.

Metodologias para componetização, vantagens, controle e qualidade de código e uso de variáveis e helpers.

Published in: Technology

Componetização de CSS com o Compass (Front in Sampa 2013)

  1. 1. Componetização de CSS com Compass / Sass Guilherme Serrano
  2. 2. Quem? Guilherme Serrano (@gserrano) Web developer Graduado em design (ui ui ui) Pós graduando em gestão empreendedora Developer e sócio do @eucompraria (eucompraria.com. br) Experiências anteriores - iG - Itau BBA (MM Café) - Avon (MM Café)
  3. 3. “ Se você faz sites grandes usando CSS, já deve ter notado que chega uma etapa do trabalho que se não prestar a atenção devida, podemos nos perder em um mundo de propriedades, classes e ids. Diego Eis - Tableless
  4. 4. CSS Modular
  5. 5. CSS Modular - Grid
  6. 6. CSS Modular - Grid - Usar herança de verdade
  7. 7. CSS Modular - Grid - Usar herança de verdade - Organização
  8. 8. CSS Modular - Grid - Usar herança de verdade - Organização - Manutenção
  9. 9. CSS Modular - Grid - Usar herança de verdade - Organização - Manutenção - Facilidade de customização
  10. 10. Componentes?
  11. 11. Componentes?
  12. 12. Componentes?
  13. 13. Componentes?
  14. 14. Compass - Reset - Math - Selector - Images - Helpers - Colors - Sprites
  15. 15. Variáveis no Compass (sass)
  16. 16. Variáveis no Compass
  17. 17. Variáveis no Compass $main-color: #333; $secondary-color: red;
  18. 18. Variáveis no Compass $main-color: #333; $secondary-color: red; .products{ border-color: $secondary-color; color: $main-color; }
  19. 19. Variáveis no Compass $main-color: #333; $secondary-color: red; .products{ border-color: $secondary-color; color: $main-color; } .products a:hover{ darken($main-color, 10%); }
  20. 20. Variáveis no Compass @import "compass/css3"; $primary-font: verdana; $box-padding: 5px; $border-radius: 4px; .features{ @include border-radius($border-radius); padding: $box-padding; p{font-family: $primary-font;} }
  21. 21. Resultado .features { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; padding: 5px; } .features p { font-family: verdana; }
  22. 22. Tipografia
  23. 23. Cores
  24. 24. Imagens
  25. 25. Espaçamentos
  26. 26. Includes
  27. 27. Includes no Compass - sass - _componentes - componente.scss screen.scss
  28. 28. Includes no Compass screen.scss @import "_componentes/componente";
  29. 29. É include de CSS?
  30. 30. Arquitetura de front-end componentes em projetos utilizando templates
  31. 31. Portal
  32. 32. CMS
  33. 33. E-commerce
  34. 34. Intranet
  35. 35. Sistemas web
  36. 36. Templates Wordpress Bootstrap etc
  37. 37. Pense antes de fazer
  38. 38. Pense nas variáveis exigidas pelo design
  39. 39. Negocie com o designer
  40. 40. Pense na
  41. 41. Estrutura de arquivos e adapte a sua necessidade
  42. 42. projeto _componentes 04_produto.scss 06_lista-chamada.scss 12_noticia.scss .. eucompraria images sprite.png .. style.scss eucompraria-natal style.scss
  43. 43. projeto _componentes 04_produto.scss 06_lista-chamada.scss 12_noticia.scss .. eucompraria images sprite.png .. style.scss eucompraria-natal style.scss Projeto Compass
  44. 44. projeto _componentes 04_produto.scss 06_lista-chamada.scss 12_noticia.scss .. eucompraria images sprite.png .. style.scss eucompraria-natal style.scss Não serão compilados Projeto Compass
  45. 45. screen.scss @import "compass/css3"; @import "compass/utilities"; $primary-font: verdana; $box-padding: 5px; $border-radius: 4px; $primary-color: #333; @import "../../_componentes/componente";
  46. 46. natal.scss @import "compass/css3"; @import "compass/utilities"; $primary-font: “Comic Sans”; $box-padding: 5px; $border-radius: 4px; $primary-color: red; @import "../../_componentes/componente";
  47. 47. CSS de 3 mil linhas Agora são menos de 500 linhas
  48. 48. O canal Esporte vai mudar a tipografia! 3 minutos para fazer
  49. 49. O Daniel Filho exigiu o componente de calendário na intranet do ZOFE Sexta, 14h, precisa ser hoje
  50. 50. Meu componente tem variáveis que o template ainda não tem. E agora?
  51. 51. O compass não compila E mantém a qualidade do seu código!
  52. 52. Refactoring de CSS Acabaram as desculpas para deixar código legado
  53. 53. + produtividade
  54. 54. + produtividade = + tempo estudando (zofe, loop infinito, tableless, o desenvolvedor…)
  55. 55. + produtividade = + tempo estudando (zofe, loop infinito, tableless, o desenvolvedor…) = + produtividade
  56. 56. Foto por @torresfelipe
  57. 57. Inovem sem moderação
  58. 58. Obrigado @gserrano contato@guilhermeserrano.com.br http://andafter.org http://eucompraria.com.br http://gssolutions.com.br

×