Your SlideShare is downloading. ×
  • Like
  • Save
An Intro to Sass: This Designer's Dive into Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

An Intro to Sass: This Designer's Dive into Sass

  • 541 views
Published

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.

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.

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
541
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
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. 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