Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Sobre mim   Anderson Aguiar, 23   @andersonaguiar   Trabalho na
Os 3 mais populares
http://sass-lang.com/
Features•   Variables•   Nesting•   Mixins•   Selector Inheritance•   Compression•   Clean code•   Silent comments•   Colo...
FeaturesVariables
FeaturesMathematical Expressions
FeaturesMathematical Expressions
FeaturesColors
FeaturesNesting
FeaturesMixins
FeaturesMixins
FeaturesSelector Inheritance
FeaturesCompression + Silent comments
FeaturesImports
Syntax         S   SASS
Instalação
Instalação             Instalar o ruby:             http://rubyinstaller.org/downloads/
Instalação             http://tinyurl.com/9nxw79l
Instalação
Instalação
Instalação             gem install sass                    ;)
Utilização sass --watch arquivo.scss:arquivo.css sass --watch sass:css --style compact
Utilização    Mas eu não gosto do terminal
http://mhs.github.com/scout-app/
http://mhs.github.com/scout-app/
Perguntas sobre SASS?
http://compass-style.org/
Frameworks
Features•   Frameworks•   Comunidade forte•   Já vem com SASS por default•   CSS3•   Sprites•   Images•   Estatísticas dos...
Instalação + Utilização 1) Entrar no diretório do projeto 2) Digitar no terminal: compass create 3) Editar o config.rb que...
Configuração
FeaturesCSS3• Não precisa preencher vendors, o compass faz isso pra  você• Incompatibilidade de sintaxe• Clearfix• Box• Bo...
FeaturesCSS3
FeaturesCSS3
FeaturesMedia queries
FeaturesSprites
FeaturesImages
FeaturesImages
FeaturesGrids
FeaturesGrids – Instalação e usohttps://github.com/nextmat/compass-960-plugin
FeaturesStats
Pré-processadores de CSSLess: http://lesscss.org/Stylus: http://learnboost.github.com/stylus/Sass: http://sass-lang.com/
Devo usar?• Já domino o CSS tradicional?• Irá agregar melhoria no meu  desenvolvimento?
Dúvidas?
Referênciashttp://www.tidbits.com.br/desenvolvendo-css-de-forma-mais-produtiva-usando-sass(imagem de instalação windows, f...
Obrigado!                                  Disponível em:            http://www.slideshare.net/andersonagr                ...
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
Nächste SlideShare
Wird geladen in …5
×

SASS + COMPASS - Alta Produtividade no Front-end

16.974 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie

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

×