An updated version of the presentation that I delivered to the Philadelphia WordPress Meetup. This particular Sass presentation was delivered to the Philly 'burbs WordPress Meetup.

1. An Intro to Sass:
This Designer's Dive into Sass
Liam Dempsey
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey

2. C’est moi!
• Designer who codes
• Not a developer
• Run an international consultancy
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

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

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
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

5. Hat Tips
Ngaire Ackerley: @ngaireackerley
Tracy Levesque: @liljimmi
Jeremy Pry: @jpry
Owen Winkler: @ringmaster (for giving
me a ride to the meetup)
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

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
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

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

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
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

9. READY?

10. Configure Sublime Text 2
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

11. Configure Sublime Text 2
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

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

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

14. The Partials
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

15. The @import
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

16. The @import
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

17. The Partials: _footer.scss
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

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
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

19. Organizing Codekit
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

20. Organizing Codekit
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

21. Organizing Codekit
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

22. Let’s Get
Sassing!

23. Variables
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014

24. Nesting
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey

25. Extend: with @mixin
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey

26. Extend: @extend
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey

27. Operators
Philly ‘burbs WordPress Meetup: March 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.
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey

29. Mixins + Placeholders
Philly ‘burbs WordPress Meetup: March 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 %.
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey

31. Questions?

32. Sass Resources
http://sass-lang.com/
http://susy.oddbird.net/
https://speakerdeck.com/danajanssen/using-sass-to-code-better-
wordpress-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-using-
sass-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/
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey

33. Work: lbdesign.tv
Blog: liamdempsey.com
Quirky: chickenmonkeydog.com
@liamdempsey
liam@lbdesign.tv
Thanks!
Philly ‘burbs WordPress Meetup: March 2014
@liamdempsey