CSS to SCSS

Rob Walker from Papertrail takes us through his recent journey from regular CSS to SCSS. If you’re thinking of making the switch yourself and just need a little push, this is the talk for you.

Transcript

1. CSS to SCSS Making the Switch
2. Rob Walker CTO of Papertrail.io Made the switch in September 2013, and have never looked back rob@papertrail.io @_rob_walker_
3. Coming up • Why you should use SCSS • Working with SCSS • Making the switch • Next steps • Questions
4. Resources • Examples from this talk at - 
 https://github.com/papertrailrob/frontendne-scss • http://sass-lang.com
5. Why should you use SCSS • Easy to learn, and you can start today • Makes CSS more powerful • Will make your life easier
6. Working with SCSS • Nesting • Variables • Partials • Mixins
7. Nesting • Your HTML is in a nested hierarchy. Your CSS can be to. • Write less • Read more easily
8. Example
9. Variables • Define once, use everywhere • Control a whole layout or style from a few variables • Use the variables in calculations, colour modifiers and loads of other operators
10. Example
11. Partials and Import • Split SCSS into manageable chunks. • Organise your files • Import open source libraries
12. Example
13. Mixins • Reusable snippets of SCSS • Prevent repetition • Use open source mixins to make life easier
14. Example
15. How to make the switch • Install SCSS - sass-lang.com/install • Convert CSS to SCSS - Just rename .css to .scss • Generate SCSS - scss styles.scss:styles.css • Play and learn (and read the docs)
16. Example
17. Next steps • Try SCSS out yourself • Read the guide at sass-lang.com/guide • Check out the Frameworks (Compass, Bourbon, Susy)
18. Questions