Alta produtividade com front end com sass e compass

2. Sobre mim
Anderson Aguiar, 23
@andersonaguiar
Trabalho na

3. Os 3 mais populares

4. http://sass-lang.com/

6. Features
• Variables
• Nesting
• Mixins
• Selector Inheritance
• Compression
• Clean code
• Silent comments
• Colors(darken, lighten, saturate, grayscale)
• Mathematical Expressions
• Imports

7. Features
Variables

8. Features
Mathematical Expressions

9. Features
Mathematical Expressions

10. Features
Colors

11. Features
Nesting

12. Features
Mixins

13. Features
Mixins

14. Features
Selector Inheritance

15. Features
Compression + Silent comments

16. Features
Imports

17. Syntax
SCSS SASS

18. Instalação

19. Instalação
Instalar o ruby:
http://rubyinstaller.org/downloads/

20. Instalação
http://tinyurl.com/9nxw79l

21. Instalação

22. Instalação

23. Instalação
gem install sass
;)

24. Utilização
sass --watch arquivo.scss:arquivo.css
sass --watch sass:css --style compact

25. Utilização
Mas eu não gosto do terminal

26. http://mhs.github.com/scout-app/

27. http://mhs.github.com/scout-app/

28. Perguntas sobre SASS?
?

29. http://compass-style.org/

31. Frameworks

32. Features
• Frameworks
• Comunidade forte
• Já vem com SASS por default
• CSS3
• Sprites
• Images
• Estatísticas dos SCSS/CSS
• Validação de CSS
• ...

33. Instalação + Utilização
1) Entrar no diretório do projeto
2) Digitar no terminal: compass create
3) Editar o config.rb que foi gerado, para as suas preferências
4) Digitar no terminal: compass watch
5) Começar a mágica ;)

34. Configuração

35. Features
CSS3
• Não precisa preencher vendors, o compass faz isso pra
você
• Incompatibilidade de sintaxe
• Clearfix
• Box
• Box-shadow
• Border radius
• Text shadow
• Gradient
• Etc...

36. Features
CSS3

37. Features
CSS3

38. Features
Media queries

39. Features
Sprites

40. Features
Images

41. Features
Images

44. Features
Grids

45. Features
Grids – Instalação e uso
https://github.com/nextmat/compass-960-plugin

46. Features
Stats

47. Pré-processadores de CSS
Less: http://lesscss.org/
Stylus: http://learnboost.github.com/stylus/
Sass: http://sass-lang.com/

48. Devo usar?
• Já domino o CSS tradicional?
• Irá agregar melhoria no meu
desenvolvimento?

49. Dúvidas?
?

50. Referências
http://www.tidbits.com.br/desenvolvendo-css-de-forma-mais-produtiva-usando-sass
(imagem de instalação windows, fluxo variáveis de ambiente)
http://www.slideshare.net/chriseppstein/authoring-stylesheets-with-compass-sass
http://www.slideshare.net/hlb/sass-compass-7653212
http://www.slideshare.net/adantz/frontendentwicklung-mit-sass-compass
http://www.slideshare.net/verekia/deep-dive-into-css-preprocessors
http://compass-style.org/
http://sass-lang.com/

51. Obrigado!
Disponível em:
http://www.slideshare.net/andersonagr
Contato:
@andersonaguiar
andersonaguiarrr@gmail.com