Liam Dempsey gave a presentation on Sass (Syntactically Awesome Style Sheets) at the Philadelphia WordPress Meetup in February 2014. He discussed what Sass is, why designers should use it, and how to set up a local development environment with Sass. He covered basic Sass features like variables, nesting, extends, mixins and more. The goal was to help designers get started with Sass and remove fears about using it.

1. Sweet Sassafras:
A Designer's Dive into Sass
Liam Dempsey
@liamdempsey
Philadelphia WordPress Meetup: February 2014
@liamdempsey

2. C’est moi!
•
•
•
•
•
Designer
Designer
Designer who codes
Not a developer
Organize the Philly ‘burbs WordPress
Meetup (#burbswp)
• Run an international consultancy
Philadelphia WordPress Meetup: February 2014
@liamdempsey

3. What We’ll Cover
• The WHAT and WHY of Sass
• Tweak local development setup for
Sass (on a Mac)
• Basic elements of Sass
Philadelphia WordPress Meetup: February 2014
@liamdempsey

4. My Goals for Tonight
• Remove the fear
• Put you on the
right road
• Provide resources
for moving forward
• Get you excited to
get started
Philadelphia WordPress Meetup: February 2014
@liamdempsey

5. Hat Tips
Ngaire Ackerley: @ngaireackerley
Tracy Levesque: @liljimmi
Jeremy Pry: @jeremypry
Brad, Doug and Reed: @williamsba,
@zamoose and @tangofoxtrot
Philadelphia WordPress Meetup: February 2014
@liamdempsey

6. What is Sass?
• Kind of like CSS for CSS
• Very powerful: like CSS
on the sort of steroids
that would frighten even
Lance Armstrong
Philadelphia WordPress Meetup: February 2014
@liamdempsey

7. Why Sass?
• Improve workflows – make it easier
on yourself
• Improve efficiencies – build websites
faster
Philadelphia WordPress Meetup: February 2014
@liamdempsey

8. For a Designer: The Tools
•
•
•
•
Working on a Mac
Code editor: Sublime Text 2
Codekit to compile the Sass
A clean, local WordPress install using
MAMP
Philadelphia WordPress Meetup: February 2014
@liamdempsey

9. READY?

10. Configure Sublime Text 2
Philadelphia WordPress Meetup: February 2014
@liamdempsey

11. Configure Sublime Text 2
Philadelphia WordPress Meetup: February 2014
@liamdempsey

12. Configure Sublime Text 2
STEP 1: https://sublime.wbond.net/
installation
STEP 2: https://github.com/nathos/
sass-textmate-bundle
Philadelphia WordPress Meetup: February 2014
@liamdempsey

13. Organizing Your Sass Files
• Partials – the different sub-files that
are compiled into a single CSS file
• @import – the code used to deter the
order in which the partials are
compiled in the output CSS
Philadelphia WordPress Meetup: February 2014
@liamdempsey

14. The Partials
Philadelphia WordPress Meetup: February 2014
@liamdempsey

15. The @import
Philadelphia WordPress Meetup: February 2014
@liamdempsey

16. The @import
Philadelphia WordPress Meetup: February 2014
@liamdempsey

17. The Partials: _footer.scss
Philadelphia WordPress Meetup: February 2014
@liamdempsey

18. Grab a Normalize.scss
• Preserves useful defaults
• Normalizes styles for a wide range of
elements.
• Corrects bugs + common browser
inconsistencies
• Code online at: https://github.com/
kristerkari/normalize.scss
Philadelphia WordPress Meetup: February 2014
@liamdempsey

19. Organizing Codekit
Philadelphia WordPress Meetup: February 2014
@liamdempsey

20. Organizing Codekit
Philadelphia WordPress Meetup: February 2014
@liamdempsey

21. Organizing Codekit
Philadelphia WordPress Meetup: February 2014
@liamdempsey

22. Let’s Get
Sassing!

23. Variables
Philadelphia WordPress Meetup: February 2014
@liamdempsey

24. Nesting
Philadelphia WordPress Meetup: February 2014
@liamdempsey

25. Extend: with @mixin
Philadelphia WordPress Meetup: February 2014
@liamdempsey

26. Extend: @extend
Philadelphia WordPress Meetup: February 2014
@liamdempsey

27. Operators
Philadelphia WordPress Meetup: February 2014
@liamdempsey

28. Mixins + Placeholders
• A mixin lets you make groups of CSS
declarations that you want to reuse
throughout your site.
• Functions that drop CSS content
instead of returning a value.
Philadelphia WordPress Meetup: February 2014
@liamdempsey

29. Mixins + Placeholders
Philadelphia WordPress Meetup: February 2014
@liamdempsey

30. Mixins + Placeholders
• A placeholder is like a @mixin except
that it does not allow for variables
• Placeholder selectors look like class
and id selectors, except the # or . is
replaced by %.
Philadelphia WordPress Meetup: February 2014
@liamdempsey

31. Questions?

32. Sass Resources
http://sass-lang.com/
http://susy.oddbird.net/
https://speakerdeck.com/danajanssen/using-sass-to-code-betterwordpress-templates
http://talks.guyroutledge.co.uk/sass-compass/slides/#/1
http://sonspring.com/journal/sass-for-designers
http://www.developerdrive.com/2012/07/introduction-to-sass/
http://www.creativebloq.com/web-design/create-flexible-grids-usingsass-9134524
http://lukewhitehouse.co.uk/compiling-sass-for-wordpress
http://peteschuster.com/2013/02/beyond-oocss-with-sass/
http://css-tricks.com/compass-compiling-and-wordpress-themes/
http://thesassway.com/beginner
http://www.thetracyl.com/start-using-sass/
Philadelphia WordPress Meetup: February 2014
@liamdempsey

33. Thanks!
Work: lbdesign.tv
Blog: liamdempsey.com
Quirky: chickenmonkeydog.com
@liamdempsey
liam@lbdesign.tv
Philadelphia WordPress Meetup: February 2014
@liamdempsey