SASS + COMPASS - Alta Produtividade no Front-end

Introdução aos pré-processadores, features, comandos, instalação e frameworks.

Transcript

2. Sobre mim
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 andersonaguiar.web@gmail.com