Turbo theming: Introduction to Sass & Compass

922 views

Published on

Introduction to Sass & Compass, specially with Drupal!

Published in: Technology, Education
  • Be the first to comment

Turbo theming: Introduction to Sass & Compass

  1. 1. Turbo theming~! Introduction to sass & compass
  2. 2. Who are you man? @AlmogBaku nice to meet ya` 1. Lean entrepreneur 2. CEO at GoDisco 3. Web developer for almost 9 years http://www.AlmogBaku.com
  3. 3. What are we going to talk about? • Why traditional CSS is sucks? • Say hello to Sass! • How to Sass? (and compass! dah?) • Sass with Drupal!
  4. 4. Why traditional CSS is sucks? Actually- CSS is awesome!...
  5. 5. Without CSS, everything was looks just bad…
  6. 6. Why traditional CSS is sucks? But Sass is just… better!
  7. 7. Why traditional CSS is sucks? Okay.. seriously!: 1. 2. 3. 4. 5. Developing is SLOW! Its repetitive It really messy and hard to understand Not really reusable Hard to collaborate
  8. 8. What can we do about it? “I wish we just have a tool to program css…”
  9. 9. What can we do about it?
  10. 10. What can we do about it? Sass is the awesome one! Syntactically Awesome StyleSheets (really!) 1. 2. 3. 4. Compass Popularity / huge community It’s written on ruby It’s the future!
  11. 11. Say hello to Sass • Actually – sass is dead, but we use in version 2 of sass: SCSS • SCSS extends regular CSS.. So- you can just paste your old css.
  12. 12. Say hello to Sass: Variables SCSS CSS
  13. 13. Say hello to Sass: Variables SCSS CSS
  14. 14. Say hello to Sass: Math SCSS CSS
  15. 15. Say hello to Sass: Math SCSS CSS
  16. 16. Say hello to Sass: Nesting SCSS CSS
  17. 17. Say hello to Sass: Nesting SCSS CSS
  18. 18. Say hello to Sass: Mixin (like functions) SCSS CSS
  19. 19. Say hello to Sass: Mixin (like functions) SCSS CSS
  20. 20. Say hello to Sass: Mixin (like functions) SCSS CSS
  21. 21. Say hello to Sass: Extend SCSS CSS
  22. 22. Say hello to Sass: Extend SCSS CSS
  23. 23. Say hello to Sass: Import Multiple files compiled to one file! Tip!: files with underline prefix such as “_components.scss” will not compile, and will use as asset!
  24. 24. Say hello to Sass: Even more! You do even more!: • • • • Loops If statements Color manipulation Plugins
  25. 25. Say hello to Sass: Compiling 1. Automatic minification 2. Automatic aggregation (using @import) 3. Compiling is really easy! 1. The cool geeky way - using command line 2. Using GUI software such as Scout (yakk!)
  26. 26. Say hello to Sass: compiling
  27. 27. Awesome right?
  28. 28. How to sass? SCSS is quite simple right?.. But we are hungry for more!.. Meet Compass Compass is a framework for using sass..
  29. 29. Compass
  30. 30. Compass Compass allow us to do much more with sass: 1. Cool built-in mixings 2. Automated sprites! 3. Powerful CLI 4. Reset CSS 5. Much more..
  31. 31. Compass: mixins 1. Powerful built-in mixins! 2. Built-in mixing are cross-browser! No need to care about “-moz” or “-webkit”.. • CSS3 mixins: Border-radius, gradients, text-shadow, box-shadow, opacity, and much more.. • Helpers: Font-types, colors, image dimensions, and much more.. • Typography Horizontal list, delimited list, text replacement, and much more • More..
  32. 32. Compass: sprites We can easily make sprites! 1 2 3 -or- 3
  33. 33. Da dam!
  34. 34. Susy Susy is an compass plugin Susy made responsive grids easy!
  35. 35. Zurb Foundation • Foundation is front-end framework • Built on top of sass/compass • Help you build fast prototyping
  36. 36. Workflow & production • Compiling is actually easy! just one command For developing phase: ~$ compass watch (will watch for every change in your files, than compile) For production phase: ~$ compass compile -e production --force
  37. 37. For Drupal • With ruby(command line): Just as usual • Zen theme(theme framework) already use sass! • Sasson – Israeli open source theme, will help you develop rapid sass for Drupal.
  38. 38. Questions?
  39. 39. Thank you! Do you define yourself as “pro” developer? Heard about AngularJs? Symfony2? And all the heavy stuff? If you’re young, cool guy/pal, and looking for adventures.. We are looking for you!

×