SASS + COMPASS - Alta Produtividade no Front-end

14,260 views
13,896 views

Published on

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

Published in: Technology

SASS + COMPASS - Alta Produtividade no Front-end

  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. FeaturesVariables
  6. 6. FeaturesMathematical Expressions
  7. 7. FeaturesMathematical Expressions
  8. 8. FeaturesColors
  9. 9. FeaturesNesting
  10. 10. FeaturesMixins
  11. 11. FeaturesMixins
  12. 12. FeaturesSelector Inheritance
  13. 13. FeaturesCompression + Silent comments
  14. 14. FeaturesImports
  15. 15. Syntax S 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. FeaturesCSS3• 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. FeaturesCSS3
  34. 34. FeaturesCSS3
  35. 35. FeaturesMedia queries
  36. 36. FeaturesSprites
  37. 37. FeaturesImages
  38. 38. FeaturesImages
  39. 39. FeaturesGrids
  40. 40. FeaturesGrids – Instalação e usohttps://github.com/nextmat/compass-960-plugin
  41. 41. FeaturesStats
  42. 42. Pré-processadores de CSSLess: 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ênciashttp://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-sasshttp://www.slideshare.net/hlb/sass-compass-7653212http://www.slideshare.net/adantz/frontendentwicklung-mit-sass-compasshttp://www.slideshare.net/verekia/deep-dive-into-css-preprocessorshttp://compass-style.org/http://sass-lang.com/
  46. 46. Obrigado! Disponível em: http://www.slideshare.net/andersonagr Contato: @andersonaguiar andersonaguiarrr@gmail.com

×