Sweet Sassafras:
A Designer's Dive into Sass

Liam Dempsey
@liamdempsey

Philadelphia WordPress Meetup: February 2014

@li...
C’est moi!
• 
• 
• 
• 
• 

Designer
Designer
Designer who codes
Not a developer
Organize the Philly ‘burbs WordPress
Meetu...
What We’ll Cover
•  The WHAT and WHY of Sass
•  Tweak local development setup for
Sass (on a Mac)
•  Basic elements of Sas...
My Goals for Tonight
•  Remove the fear
•  Put you on the
right road
•  Provide resources
for moving forward
•  Get you ex...
Hat Tips
Ngaire Ackerley: @ngaireackerley
Tracy Levesque: @liljimmi
Jeremy Pry: @jeremypry
Brad, Doug and Reed: @williamsb...
What is Sass?
•  Kind of like CSS for CSS
•  Very powerful: like CSS
on the sort of steroids
that would frighten even
Lanc...
Why Sass?
•  Improve workflows – make it easier
on yourself
•  Improve efficiencies – build websites
faster

Philadelphia Wor...
For a Designer: The Tools
• 
• 
• 
• 

Working on a Mac
Code editor: Sublime Text 2
Codekit to compile the Sass
A clean, l...
READY?
Configure Sublime Text 2

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Configure Sublime Text 2

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Configure Sublime Text 2
STEP 1: https://sublime.wbond.net/
installation
STEP 2: https://github.com/nathos/
sass-textmate-b...
Organizing Your Sass Files
•  Partials – the different sub-files that
are compiled into a single CSS file
•  @import – the co...
The Partials

Philadelphia WordPress Meetup: February 2014

@liamdempsey
The @import

Philadelphia WordPress Meetup: February 2014

@liamdempsey
The @import

Philadelphia WordPress Meetup: February 2014

@liamdempsey
The Partials: _footer.scss

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Grab a Normalize.scss
•  Preserves useful defaults
•  Normalizes styles for a wide range of
elements.
•  Corrects bugs + c...
Organizing Codekit

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Organizing Codekit

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Organizing Codekit

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Let’s Get
Sassing!
Variables

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Nesting

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Extend: with @mixin

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Extend: @extend

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Operators

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Mixins + Placeholders
•  A mixin lets you make groups of CSS
declarations that you want to reuse
throughout your site.
•  ...
Mixins + Placeholders

Philadelphia WordPress Meetup: February 2014

@liamdempsey
Mixins + Placeholders
•  A placeholder is like a @mixin except
that it does not allow for variables
•  Placeholder selecto...
Questions?
Sass Resources
http://sass-lang.com/
http://susy.oddbird.net/
https://speakerdeck.com/danajanssen/using-sass-to-code-bette...
Thanks!
Work: lbdesign.tv
Blog: liamdempsey.com
Quirky: chickenmonkeydog.com
@liamdempsey
liam@lbdesign.tv

Philadelphia W...
Upcoming SlideShare
Loading in...5
×

Sweet Sassafras: A Designer's Dive into Sass

547

Published on

An introduction to Sass for designers working in the WordPress environment

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
547
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sweet Sassafras: A Designer's Dive into Sass

  1. 1. Sweet Sassafras: A Designer's Dive into Sass Liam Dempsey @liamdempsey Philadelphia WordPress Meetup: February 2014 @liamdempsey
  2. 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. 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. 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. 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. 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. 7. Why Sass? •  Improve workflows – make it easier on yourself •  Improve efficiencies – build websites faster Philadelphia WordPress Meetup: February 2014 @liamdempsey
  8. 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. 9. READY?
  10. 10. Configure Sublime Text 2 Philadelphia WordPress Meetup: February 2014 @liamdempsey
  11. 11. Configure Sublime Text 2 Philadelphia WordPress Meetup: February 2014 @liamdempsey
  12. 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. 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. 14. The Partials Philadelphia WordPress Meetup: February 2014 @liamdempsey
  15. 15. The @import Philadelphia WordPress Meetup: February 2014 @liamdempsey
  16. 16. The @import Philadelphia WordPress Meetup: February 2014 @liamdempsey
  17. 17. The Partials: _footer.scss Philadelphia WordPress Meetup: February 2014 @liamdempsey
  18. 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. 19. Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey
  20. 20. Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey
  21. 21. Organizing Codekit Philadelphia WordPress Meetup: February 2014 @liamdempsey
  22. 22. Let’s Get Sassing!
  23. 23. Variables Philadelphia WordPress Meetup: February 2014 @liamdempsey
  24. 24. Nesting Philadelphia WordPress Meetup: February 2014 @liamdempsey
  25. 25. Extend: with @mixin Philadelphia WordPress Meetup: February 2014 @liamdempsey
  26. 26. Extend: @extend Philadelphia WordPress Meetup: February 2014 @liamdempsey
  27. 27. Operators Philadelphia WordPress Meetup: February 2014 @liamdempsey
  28. 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. 29. Mixins + Placeholders Philadelphia WordPress Meetup: February 2014 @liamdempsey
  30. 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. 31. Questions?
  32. 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. 33. Thanks! Work: lbdesign.tv Blog: liamdempsey.com Quirky: chickenmonkeydog.com @liamdempsey liam@lbdesign.tv Philadelphia WordPress Meetup: February 2014 @liamdempsey

×