CSS to SCSSMaking the Switch

Rob WalkerCTO of Papertrail.io

Made the switch in September 2013, and have

never looked back

rob@papertrail.io @_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