Your SlideShare is downloading. ×
0
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Turbo theming: Introduction to Sass & Compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Turbo theming: Introduction to Sass & Compass

608

Published on

Introduction to Sass & Compass, specially with Drupal!

Introduction to Sass & Compass, specially with Drupal!

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
608
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
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. Turbo theming~! Introduction to sass & compass
  • 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. 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. Why traditional CSS is sucks? Actually- CSS is awesome!...
  • 5. Without CSS, everything was looks just bad…
  • 6. Why traditional CSS is sucks? But Sass is just… better!
  • 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. What can we do about it? “I wish we just have a tool to program css…”
  • 9. What can we do about it?
  • 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. 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. Say hello to Sass: Variables SCSS CSS
  • 13. Say hello to Sass: Variables SCSS CSS
  • 14. Say hello to Sass: Math SCSS CSS
  • 15. Say hello to Sass: Math SCSS CSS
  • 16. Say hello to Sass: Nesting SCSS CSS
  • 17. Say hello to Sass: Nesting SCSS CSS
  • 18. Say hello to Sass: Mixin (like functions) SCSS CSS
  • 19. Say hello to Sass: Mixin (like functions) SCSS CSS
  • 20. Say hello to Sass: Mixin (like functions) SCSS CSS
  • 21. Say hello to Sass: Extend SCSS CSS
  • 22. Say hello to Sass: Extend SCSS CSS
  • 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. Say hello to Sass: Even more! You do even more!: • • • • Loops If statements Color manipulation Plugins
  • 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. Say hello to Sass: compiling
  • 27. Awesome right?
  • 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. Compass
  • 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. 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. Compass: sprites We can easily make sprites! 1 2 3 -or- 3
  • 33. Da dam!
  • 34. Susy Susy is an compass plugin Susy made responsive grids easy!
  • 35. Zurb Foundation • Foundation is front-end framework • Built on top of sass/compass • Help you build fast prototyping
  • 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. 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. Questions?
  • 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!

×