CSS to SCSS Making the Switch 

Rob Walker CTO of Papertrail.io Made the switch in September 2013, and have never looked back [email protected] @_rob_walker_ 

Coming up • Why you should use SCSS • Working with SCSS • Making the switch • Next steps • Questions 

Resources • Examples from this talk at - 
 https://github.com/papertrailrob/frontendne-scss • http://sass-lang.com 

Why should you use SCSS • Easy to learn, and you can start today • Makes CSS more powerful • Will make your life easier 

Working with SCSS • Nesting • Variables • Partials • Mixins 

Nesting • Your HTML is in a nested hierarchy. Your CSS can be to. • Write less • Read more easily 

Example 

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 

Example 

Partials and Import • Split SCSS into manageable chunks. • Organise your files • Import open source libraries 

Example 

Mixins • Reusable snippets of SCSS • Prevent repetition • Use open source mixins to make life easier 

Example 

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) 

Example 

Next steps • Try SCSS out yourself • Read the guide at sass-lang.com/guide • Check out the Frameworks (Compass, Bourbon, Susy) 

Questions