Alta produtividade com front end com sass e compass

799 visualizações

Publicada em

Alta produtividade com front end com sass e compass

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
799
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Alta produtividade com front end com sass e compass

  1. 1. Sobre mim Anderson Aguiar, 23 @andersonaguiar Trabalho na
  2. 2. Os 3 mais populares
  3. 3. http://sass-lang.com/
  4. 4. Features • Variables • Nesting • Mixins • Selector Inheritance • Compression • Clean code • Silent comments • Colors(darken, lighten, saturate, grayscale) • Mathematical Expressions • Imports
  5. 5. Features Variables
  6. 6. Features Mathematical Expressions
  7. 7. Features Mathematical Expressions
  8. 8. Features Colors
  9. 9. Features Nesting
  10. 10. Features Mixins
  11. 11. Features Mixins
  12. 12. Features Selector Inheritance
  13. 13. Features Compression + Silent comments
  14. 14. Features Imports
  15. 15. Syntax SCSS SASS
  16. 16. Instalação
  17. 17. Instalação Instalar o ruby: http://rubyinstaller.org/downloads/
  18. 18. Instalação http://tinyurl.com/9nxw79l
  19. 19. Instalação
  20. 20. Instalação
  21. 21. Instalação gem install sass ;)
  22. 22. Utilização sass --watch arquivo.scss:arquivo.css sass --watch sass:css --style compact
  23. 23. Utilização Mas eu não gosto do terminal
  24. 24. http://mhs.github.com/scout-app/
  25. 25. http://mhs.github.com/scout-app/
  26. 26. Perguntas sobre SASS? ?
  27. 27. http://compass-style.org/
  28. 28. Frameworks
  29. 29. Features • Frameworks • Comunidade forte • Já vem com SASS por default • CSS3 • Sprites • Images • Estatísticas dos SCSS/CSS • Validação de CSS • ...
  30. 30. 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 ;)
  31. 31. Configuração
  32. 32. 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...
  33. 33. Features CSS3
  34. 34. Features CSS3
  35. 35. Features Media queries
  36. 36. Features Sprites
  37. 37. Features Images
  38. 38. Features Images
  39. 39. Features Grids
  40. 40. Features Grids – Instalação e uso https://github.com/nextmat/compass-960-plugin
  41. 41. Features Stats
  42. 42. Pré-processadores de CSS Less: http://lesscss.org/ Stylus: http://learnboost.github.com/stylus/ Sass: http://sass-lang.com/
  43. 43. Devo usar? • Já domino o CSS tradicional? • Irá agregar melhoria no meu desenvolvimento?
  44. 44. Dúvidas? ?
  45. 45. 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/
  46. 46. Obrigado! Disponível em: http://www.slideshare.net/andersonagr Contato: @andersonaguiar andersonaguiarrr@gmail.com

×