Your SlideShare is downloading. ×
Sweet Sassafras: A Designer's Dive into Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sweet Sassafras: A Designer's Dive into Sass

451
views

Published on

An introduction to Sass for designers working in the WordPress environment

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
451
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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