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.

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