A presentation given at WordCamp Kansas City 2014 to help developers start using Sass in their WordPress themes and plugins.

1. Using Sass in Your
WordPress Projects
Kansas City WordCamp - July 12, 2014
!

2. Jeremy Green
WordPress Developer at Endo Creative
Organizer of the Fort Collins WordPress Meetup
!
@greenhornet79
!
endocreative.com
!

3. CSS Today
!

4. Bert Bos, CSS co-inventor:
!
“CSS stops short of even more powerful
features that programmers use in their
programming languages: macros, variables,
symbolic constants, conditionals,
expressions over variables, etc. That is
because these things give power-users a lot
of rope, but less experienced users will
unwittingly hang themselves.”

5. Vanilla CSS

6. Putting the Power into CSS

7. CSS Preprocessors

8. Sass
Syntactically Awesome Style Sheets

9. A CSS preprocessor that lets you write CSS:
!
• faster
• more efficient
• more maintainable
CSS with superpowers

10. A few of my favorite things

11. Nesting

12. CSS SCSS

13. Variables

14. !
• similar to php variables
• turn repetitive values into variables
• define it once, use it throughout your projects

15. Partials

16. !
• prepend partials with an underscore
• split CSS into maintainable blocks of code
• only one HTTP request!

17. ! Folders!

18. Extends

19. !
• reuse a snippet of CSS
• does not accept any parameters
• same styles as another class, except for a few rules

20. Silent Placeholder

21. Mixins

22. !
• accepts parameters like a function
• use for tedious tasks like vendor prefixes
• reusable block of CSS, but with parameters

23. Inline Media Queries

24. !
• create a media query mix-in
• set breakpoints for your design
• use logic and return content in a mixin

25. !
• use @include to call the mixin
• stack media queries for different breakpoints
• any rules inside media query will be added to CSS
SCSS Compiled

26. Small Investment
Big Reward

27. Installing Sass
http://sass-lang.com/install

28. Command Line
gem install sass

29. Watch the files
sass --watch global.scss:global.css

30. Applications

31. The App Way
Open app, make changes, save file

32. Your First Project

33. Watch your files

34. Configure options

35. Compressed = Fastest

36. Let’s Precompile

37. Don’t touch that file
Live is .scss land now

38. One bite at a time
!
!
you don’t have to use everything at once

39. WordPress Integration
!
!

40. Update functions.php
!
! Use style.css (old way)
Use css/global.css (new way)

41. Stripped down style.css
!
!
!
• comments for theme details
• alert future developers about the theme using Sass

42. Use in a plugin
!
!
!
• good even for small projects
• use wp_enqueue_style to enqueue css file
• split front and back end styles

43. Gravity Forms
!
!

44. Tips for Integration
!
!
!
• make sure to update css and scss files on server
• give option to edit css if needed
• create a partial for overriding plugin styles
• app is nice when you work on 10 projects a day

45. Additional Tools
!
!

46. !
• CSS3 mixins
• helper functions (colors, math, and much more)
• generate sprites dynamically

47. Susy
!
!
!
• Sass grid system (or not)
• creates layouts using mixins
• calculate column and gutter widths

48. Breakpoint
!
!
!
• media queries with Sass
• includes lots of helpful tools

49. Final Thoughts
!
!
!
• Sass won’t make you write better CSS
• Sass won’t build an awesome WP theme
• Don’t be afraid to try something new
!

50. Resources
!
!
!
• sass-lang.com
• sassmeister.com
• Compass
• Susy
• Breakpoint
• Sass for Web Designers
• CSS Tricks Screencast

51. Thank You!
@greenhornet79