An Intro to Sass:
This Designer's Dive into Sass
Liam Dempsey
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
 @li...
C’est moi!
•  Designer who codes
•  Not a developer
•  Run an international consultancy
@liamdempsey
Philly ‘burbs WordPre...
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: @jpry
Owen Winkler: @ringmaster (for givin...
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
@liamdempsey
Phil...
For a Designer: The Tools
•  Working on a Mac
•  Code editor: Sublime Text 2
•  Codekit to compile the Sass
•  A clean, lo...
READY?
Configure Sublime Text 2
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
Configure Sublime Text 2
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
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
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
The @import
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
The @import
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
The Partials: _footer.scss
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
Grab a Normalize.scss
•  Preserves useful defaults
•  Normalizes styles for a wide range of
elements.
•  Corrects bugs + c...
Organizing Codekit
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
Organizing Codekit
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
Organizing Codekit
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
Let’s Get
Sassing!
Variables
@liamdempsey
Philly ‘burbs WordPress Meetup: March 2014
Nesting
Philly ‘burbs WordPress Meetup: March 2014
 @liamdempsey
Extend: with @mixin
Philly ‘burbs WordPress Meetup: March 2014
 @liamdempsey
Extend: @extend
Philly ‘burbs WordPress Meetup: March 2014
 @liamdempsey
Operators
Philly ‘burbs WordPress Meetup: March 2014
 @liamdempsey
Mixins + Placeholders
•  A mixin lets you make groups of CSS
declarations that you want to reuse
throughout your site.
•  ...
Mixins + Placeholders
Philly ‘burbs WordPress Meetup: March 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...
Work: lbdesign.tv
Blog: liamdempsey.com
Quirky: chickenmonkeydog.com
@liamdempsey
liam@lbdesign.tv
Thanks!
Philly ‘burbs W...
Upcoming SlideShare
Loading in...5
×

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

772

Published 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.

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

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

No notes for slide

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

  1. 1. An Intro to Sass: This Designer's Dive into Sass Liam Dempsey @liamdempsey Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey
  2. 2. C’est moi! •  Designer who codes •  Not a developer •  Run an international consultancy @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  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 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  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 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  5. 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. 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. 7. Why Sass? •  Improve workflows – make it easier on yourself •  Improve efficiencies – build websites faster @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  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 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  9. 9. READY?
  10. 10. Configure Sublime Text 2 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  11. 11. Configure Sublime Text 2 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  12. 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. 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. 14. The Partials @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  15. 15. The @import @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  16. 16. The @import @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  17. 17. The Partials: _footer.scss @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  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 @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  19. 19. Organizing Codekit @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  20. 20. Organizing Codekit @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  21. 21. Organizing Codekit @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  22. 22. Let’s Get Sassing!
  23. 23. Variables @liamdempsey Philly ‘burbs WordPress Meetup: March 2014
  24. 24. Nesting Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey
  25. 25. Extend: with @mixin Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey
  26. 26. Extend: @extend Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey
  27. 27. Operators Philly ‘burbs WordPress Meetup: March 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. Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey
  29. 29. Mixins + Placeholders Philly ‘burbs WordPress Meetup: March 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 %. Philly ‘burbs WordPress Meetup: March 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-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. 33. Work: lbdesign.tv Blog: liamdempsey.com Quirky: chickenmonkeydog.com @liamdempsey liam@lbdesign.tv Thanks! Philly ‘burbs WordPress Meetup: March 2014 @liamdempsey

×