Your SlideShare is downloading. ×
  • Like
SASS + COMPASS - Alta Produtividade no Front-end
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

SASS + COMPASS - Alta Produtividade no Front-end

  • 9,621 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,621
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
138
Comments
0
Likes
30

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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