O documento discute a utilização do framework Compass e Sass para componentização de CSS, permitindo maior produtividade, manutenção e customização de códigos CSS. Compass permite variáveis, imports, mixins e outras funcionalidades que tornam o CSS mais modular e reutilizável através da criação de componentes CSS encapsulados e independentes. Isso resulta em códigos CSS menores, mais organizados e fáceis de manter.

1. Componetização de CSS
com Compass / Sass
Guilherme Serrano

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é)

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

10. CSS Modular

11. CSS Modular
- Grid

12. CSS Modular
- Grid
- Usar herança de verdade

13. CSS Modular
- Grid
- Usar herança de verdade
- Organização

14. CSS Modular
- Grid
- Usar herança de verdade
- Organização
- Manutenção

15. CSS Modular
- Grid
- Usar herança de verdade
- Organização
- Manutenção
- Facilidade de customização

16. Componentes?

17. Componentes?

18. Componentes?

19. Componentes?

21. Compass
- Reset
- Math
- Selector
- Images
- Helpers
- Colors
- Sprites

23. Variáveis
no Compass (sass)

24. Variáveis no Compass

25. Variáveis no Compass
$main-color: #333;
$secondary-color: red;

26. Variáveis no Compass
$main-color: #333;
$secondary-color: red;
.products{
border-color: $secondary-color;
color: $main-color;
}

27. 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%);
}

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

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

30. Tipografia

31. Cores

32. Imagens

33. Espaçamentos

35. Includes

36. Includes no Compass
- sass
- _componentes
- componente.scss
screen.scss

37. Includes no Compass
screen.scss
@import "_componentes/componente";

38. É include de CSS?

40. Arquitetura
de front-end
componentes em projetos
utilizando templates

41. Portal

42. CMS

43. E-commerce

44. Intranet

45. Sistemas web

46. Templates
Wordpress
Bootstrap
etc

47. Pense antes de fazer

48. Pense nas variáveis
exigidas pelo design

49. Negocie com
o designer

51. Pense na

52. Estrutura de arquivos
e adapte a sua necessidade

54. projeto
_componentes
04_produto.scss
06_lista-chamada.scss
12_noticia.scss
..
eucompraria
images
sprite.png
..
style.scss
eucompraria-natal
style.scss

55. projeto
_componentes
04_produto.scss
06_lista-chamada.scss
12_noticia.scss
..
eucompraria
images
sprite.png
..
style.scss
eucompraria-natal
style.scss
Projeto Compass

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

57. screen.scss
@import "compass/css3";
@import "compass/utilities";
$primary-font: verdana;
$box-padding: 5px;
$border-radius: 4px;
$primary-color: #333;
@import "../../_componentes/componente";

58. natal.scss
@import "compass/css3";
@import "compass/utilities";
$primary-font: “Comic Sans”;
$box-padding: 5px;
$border-radius: 4px;
$primary-color: red;
@import "../../_componentes/componente";

59. CSS de
3 mil linhas
Agora são menos de 500 linhas

60. O canal Esporte
vai mudar a tipografia!
3 minutos para fazer

61. O Daniel Filho exigiu
o componente de
calendário na intranet
do ZOFE
Sexta, 14h, precisa ser hoje

62. Meu componente tem variáveis que o template
ainda não tem.
E agora?

64. O compass não
compila
E mantém a qualidade do seu código!

65. Refactoring de CSS
Acabaram as desculpas para
deixar código legado

66. + produtividade

67. + produtividade
=
+ tempo estudando
(zofe, loop infinito, tableless, o desenvolvedor…)

68. + produtividade
=
+ tempo estudando
(zofe, loop infinito, tableless, o desenvolvedor…)
=
+ produtividade

69. Foto por @torresfelipe

70. Inovem sem moderação

71. Obrigado
@gserrano
contato@guilhermeserrano.com.br
http://andafter.org
http://eucompraria.com.br
http://gssolutions.com.br