O documento discute pré-processadores CSS como Sass e Compass. Sass oferece recursos como variáveis, seletores aninhados e mixins que facilitam a manutenção de estilos. Compass é um framework completo para Sass que fornece mixins, funções e utilidades como reset e sprites. O documento explica como instalar e usar Sass, Compass e seus principais recursos e benefícios.

1. Syntactically Awesome Style Sheets
"Folhas de Estilo Sintaticamente Impressionantes"

2. Sass & Compass

3. Pré-processadores de CSS
*.scss
*.sass
*.stylus
*.less
Pré-processador
style.css
Browser

4. Pré-processadores mais populares

8. Por que Sass ?
● Mais ativo na comunidade (criado em 2007 por Hampton Catlin)
● Sintaxe simples
● Curva de aprendizado baixa
● Facilita a manutenção
● Mais fácil utilizar modularização
● DRY
● Compass (framework mais completo)
● Diversos outros plugins

9. SassMeister - The Sass Playground!

10. node Sass

11. lib Sass

12. Apps

13. Como começar ?
$ gem install sass
Somente Sass

14. $ sass file.scss file.css
$ sass --watch folder
Comandos Sass

15. $ sass file.scss file.css --style nested|expanded|compact|compressed

16. Duas sintaxes
*.sass *.scss

17. Sass vs CSS
● Partials & Imports
● Variables
● Estruturas de controle (if-else, for, each)
● Functions
● Mixins
● Nested selectors
● Placeholder selectors
● Ancestor selectors
● Pseudo selectors

18. Partials & @import
Arquivos que iniciam com "_" são chamados de partials, esses arquivos não são compilados para
CSS mas podem ser importados dentro de outros arquivos para serem reutilizados.
_typography.scss
_sprites.scss
_icons.scss style.scss
style.css

19. Variáveis

20. Nested selectors

21. Pseudo seletores

22. Ancestor selector

23. @extend

24. Placeholder seletor

25. Media Queries

26. @mixin

30. @function

31. @each

32. @for

33. O Compass é uma imensa coleção de mixins, funções e utilidades diversas

35. $ gem install compass
Sass e Compass

37. config.rb

38. $ compass compile
$ compass watch
Comandos Compass
$ compass install bootstrap

39. Algumas utilidades do Compass
● Reset
● Mixins para prefixar as novas regras do CSS3
● Mixins para importar fontes
● Mixins para para criar regras cross-browser
● Mixins para trabalhar com gradientes
● Mixins para gerar sprites
● Mixins para manipular imagens (ex: base64 inline)
● E muito mais...

40. Reset

41. Prefixos para novas regras do CSS3

42. Importando fontes

43. CSS Hacks

44. CSS3 Gradients

45. Sprites

47. Imagens

48. Boilerplate

49. E muito mais

56. Obrigado!
@carlosrberto
http://carlosroberto.name