O documento discute o uso de pré-processadores CSS como Sass para tornar o código CSS mais organizado, reutilizável e escalável. Ele explica como Sass oferece recursos como variáveis, aninhamento, mixins, herança de seletores e funções que melhoram a manutenção e a velocidade de desenvolvimento. O documento também discute boas práticas de estruturação de arquivos e código com Sass.

1. CSS bomba[do]

2. WTF am I? Andréa Zambrana
front-end @ Amil [multicanais]
@akfzambrana
http://andreazambrana.com.br

3. Pré-processadores
O que são? O.o

5. e para nós do front?

6. [Haml, Jade, Slim, Twig, ...]
HTML

7. JS
[CoffeScript, LiveScript, TypeScript, ...]

8. CSS
[Less, Sass, Stylus, ...]

9. Tá, mas pra que serve?

10. Fazer mais com menos

11. BEM, OOCSS, SMACSS, DRY
Melhor aplicação de
metodologias

12. OMFG *____*
Código escalável e
reutilizável

13. Melhor manutenção

14. Pré-processadores CSS
Agora sim =P

16. http://lesscss.org/ http://sass-lang.com/
https://learnboost.github.io/stylus/

17. [CSS-Crush, Myth, Rework, …]
E outros menos conhecidos

18. Dica da titia
A melhor ferramenta ou
tecnologia é aquela que
atende melhor ao seu
projeto

19. Syntactically Awesome Stylesheets
Sass

20. @hcatlin
Hampton Catlin

21. Natalie Weizenbaum
@nex3

22. Chris Eppstein
@chriseppstein

23. Sintaxes
Sim, é no plural mesmo =P

24. .sass

25. .scss

26. Sobre a instalação
http://sass-lang.com/install

27. Oh yeah! now we can play! =D
Arquivos _partial

29. vem ni mim! *__*
@import

30. Estrutura de arquivos
Architecture for a Sass Project do Hugo Giraudel
How to structure a Sass project do John W. Long

31. Now, cut to the chase!

32. Variável
Variable

33. Números
Incluindo suas unidades (em, px, rem, pt, etc)

34. utilizando aspas ou não, simples ou duplas
Strings

35. Hexadecimal, nome, rgb, rgba, etc
Cores

36. true / false
Booleanos

37. $nome: valor;
Sintaxe

38. O bom, o mau e o feio
Nem tudo é branco e preto

39. Manutenção
< esforço
> velocidade

40. Desenvolvimento
> velocidade
< esforço para lembrar
> padronização

41. Customização
> possibilidades
> esforço
< velocidade

42. Show me the code!!!

43. cssscss

44. Nesting
Aninhamento

45. Boring...

46. Questão de paternindade
Who is your daddy?!

47. .pai {
.filho { … }
.irmao {
.neto { … }
}
}
Sintaxe

48. O bom, o mau e o muito feio
Tenha cuidado pequeno gafanhoto O.o

49. Manutenção
< esforço
> leitura

50. Desenvolvimento
< esforço
> organização
> velocidade

51. cuidado!cuidado!

54. Um pouco de código

55. scss css

56. Não está tão ruim
Mas pode melhorar

57. cssscss

58. Boa prática
O próximo front pode ser um serial killer =P

59. Se tiver “bisnetos”, seu código ta ficando podre ¬¬’
Dois é bom, três é demais

60. Seu lindo *___*
Mixin

61. @mixin nome(argumento) {
propriedades, regras, etc
}
Sintaxe

62. E como usa?
Quero ver código!

63. cssscss

64. O bom, o mau e o feio
Nem tudo é cor de rosa

65. > velocidade
> organização
> reciclagem / reutilização
> padronização
Desenvolvimento

66. < performance
> esforço
Desenvolvimento

67. > facilidade
> velocidade
> danos colaterais
Manutenção

68. with power comes great responsibility...
Boa prática

69. Então não é mixin
Se não recebe argumentos

70. Herança de seletores
@extend

71. Concatenação, use com moderação =]
Classes

72. @extend .nome-classe;
Sintaxe

73. Exemplo?

74. scss css

75. Place... what?
Placeholder selector

76. Imagina que é uma classe

77. %nome-do-placeholder {
propriedades, regras, etc
}
Sintaxe

78. Mas, pra que preciso de uma classe que “não é uma classe”?
Entendi...

79. Não é compilado

80. Separa um lugar

81. E como funciona?
Bora pro código!

82. scss css

83. O bom, o bomzão e o difícil
Que a força esteja conosco!

84. > velocidade
< esforço
> padronização
Desenvolvimento

85. > componentização
> uso de qualquer metodologia CSS
> efeitos colaterais
Desenvolvimento

86. > prático
> fácil
< e > esforço
Manutenção

87. > leitura
> organização
Manutenção

88. Sim e não =/
OMG so tem coisa boa!

89. Literalmente, separa um
lugar...
!important venha cá, que vou lhe usar

90. scss css

91. This is a real problem :(
Media querie

92. scss console

93. cssscss

94. Operadores

95. +
-
*
/
%
Matemáticos

96. scss css

97. cssscss

98. and
or
not
Booleanos

99. Yeah baby!! m/
Estruturas de controle

100. @if

101. @if condição {
…
} @else if condição {
…
} @else {
…
}
Sintaxe

102. @for

103. @for variável from inicio through fim {
propriedades, regras, etc
}
Sintaxe

104. @each

105. @each variavel in lista/mapa {
propriedades, regras, etc
}
Sintaxe

106. @while

107. Sintaxe
@while condição {
propriedades, regras, etc.
}

108. Really? *.*
Funções

109. São muitas e muito legais =D
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions
Nativas

110. Agora o “bagulho fica loko”
Customizadas

111. Só que bombados
São como mixins

112. @return

113. @function nome(argumento){
propriedades, regras, etc
@return valor;
}
Sintaxe

114. Não tem coisa ruim, serio!
O bom, o bomzão e o melhor

115. > velocidade
> dinámico
> lógica complexa
Desenvolvimento

117. O céu é o limite
Seja feliz!

118. Maps
Mapas

119. chave: valor
É uma lista super-poderosa

120. $map: (
chave: valor,
outra-chave: valor
);
Sintaxe

121. Legal ne?
só que essa é outra talk ;P

122. Para estudo
The Sass way - Blog
http://thesassway.com/
Hugo Giraudel - Blog
http://hugogiraudel.com/blog/
Curso de Loiane Groner - Canal Youtube
https://www.youtube.com/playlist?
list=PL3C05B7A66AC502CF

123. Referências
http://sass-lang.com/
http://alexplaza.co/scss/sass/preprocessors/2014/07/05/Porque-usar-un-preprocesador-
de-css/
https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
https://es.wikipedia.org/wiki/Sass_(lenguaje_de_hojas_de_estilo)
http://www.sitepoint.com/architecture-sass-project/
http://cssguidelin.es/
http://slides.com/ridjohansen/gdb-2013_css-reciclavel-com-o-uso-de-metodologias#/
http://pt.slideshare.net/loumontano/sass-conferencia-csssp

124. Obrigada!FEMUG ABC #5
@akfzambrana | http://andreazambrana.com.br