O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

SASS + COMPASS - Alta Produtividade no Front-end

16.868 visualizações

Publicada em

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

Publicada em: Tecnologia

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

×