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

  • 463 views
Uploaded on

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.

More 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
463
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