0
Using Sass in Your
WordPress Projects
Kansas City WordCamp - July 12, 2014
!
Jeremy Green
WordPress Developer at Endo Creative
Organizer of the Fort Collins WordPress Meetup
!
@greenhornet79
!
endocr...
CSS Today
!
Bert Bos, CSS co-inventor:
!
“CSS stops short of even more powerful
features that programmers use in their
programming lan...
Vanilla CSS
Putting the Power into CSS
CSS Preprocessors
Sass
Syntactically Awesome Style Sheets
A CSS preprocessor that lets you write CSS:
!
• faster
• more efficient
• more maintainable
CSS with superpowers
A few of my favorite things
Nesting
CSS SCSS
Variables
!
• similar to php variables
• turn repetitive values into variables
• define it once, use it throughout your projects
Partials
!
• prepend partials with an underscore
• split CSS into maintainable blocks of code
• only one HTTP request!
! Folders!
Extends
!
• reuse a snippet of CSS
• does not accept any parameters
• same styles as another class, except for a few rules
Silent Placeholder
Mixins
!
• accepts parameters like a function
• use for tedious tasks like vendor prefixes
• reusable block of CSS, but with para...
Inline Media Queries
!
• create a media query mix-in
• set breakpoints for your design
• use logic and return content in a mixin
!
• use @include to call the mixin
• stack media queries for different breakpoints
• any rules inside media query will be ...
Small Investment
Big Reward
Installing Sass
http://sass-lang.com/install
Command Line
gem install sass
Watch the files
sass --watch global.scss:global.css
Applications
The App Way
Open app, make changes, save file
Your First Project
Watch your files
Configure options
Compressed = Fastest
Let’s Precompile
Don’t touch that file
Live is .scss land now
One bite at a time
!
!
you don’t have to use everything at once
WordPress Integration
!
!
Update functions.php
!
! Use style.css (old way)
Use css/global.css (new way)
Stripped down style.css
!
!
!
• comments for theme details
• alert future developers about the theme using Sass
Use in a plugin
!
!
!
• good even for small projects
• use wp_enqueue_style to enqueue css file
• split front and back end...
Gravity Forms
!
!
Tips for Integration
!
!
!
• make sure to update css and scss files on server
• give option to edit css if needed
• create...
Additional Tools
!
!
!
• CSS3 mixins
• helper functions (colors, math, and much more)
• generate sprites dynamically
Susy
!
!
!
• Sass grid system (or not)
• creates layouts using mixins
• calculate column and gutter widths
Breakpoint
!
!
!
• media queries with Sass
• includes lots of helpful tools
Final Thoughts
!
!
!
• Sass won’t make you write better CSS
• Sass won’t build an awesome WP theme
• Don’t be afraid to tr...
Resources
!
!
!
• sass-lang.com
• sassmeister.com
• Compass
• Susy
• Breakpoint
• Sass for Web Designers
• CSS Tricks Scre...
Thank You!
@greenhornet79
Upcoming SlideShare
Loading in...5
×

Using Sass in Your WordPress Projects

630

Published on

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

Published in: Software, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Transcript of "Using Sass in Your WordPress Projects"

  1. 1. Using Sass in Your WordPress Projects Kansas City WordCamp - July 12, 2014 !
  2. 2. Jeremy Green WordPress Developer at Endo Creative Organizer of the Fort Collins WordPress Meetup ! @greenhornet79 ! endocreative.com !
  3. 3. CSS Today !
  4. 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. 5. Vanilla CSS
  6. 6. Putting the Power into CSS
  7. 7. CSS Preprocessors
  8. 8. Sass Syntactically Awesome Style Sheets
  9. 9. A CSS preprocessor that lets you write CSS: ! • faster • more efficient • more maintainable CSS with superpowers
  10. 10. A few of my favorite things
  11. 11. Nesting
  12. 12. CSS SCSS
  13. 13. Variables
  14. 14. ! • similar to php variables • turn repetitive values into variables • define it once, use it throughout your projects
  15. 15. Partials
  16. 16. ! • prepend partials with an underscore • split CSS into maintainable blocks of code • only one HTTP request!
  17. 17. ! Folders!
  18. 18. Extends
  19. 19. ! • reuse a snippet of CSS • does not accept any parameters • same styles as another class, except for a few rules
  20. 20. Silent Placeholder
  21. 21. Mixins
  22. 22. ! • accepts parameters like a function • use for tedious tasks like vendor prefixes • reusable block of CSS, but with parameters
  23. 23. Inline Media Queries
  24. 24. ! • create a media query mix-in • set breakpoints for your design • use logic and return content in a mixin
  25. 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. 26. Small Investment Big Reward
  27. 27. Installing Sass http://sass-lang.com/install
  28. 28. Command Line gem install sass
  29. 29. Watch the files sass --watch global.scss:global.css
  30. 30. Applications
  31. 31. The App Way Open app, make changes, save file
  32. 32. Your First Project
  33. 33. Watch your files
  34. 34. Configure options
  35. 35. Compressed = Fastest
  36. 36. Let’s Precompile
  37. 37. Don’t touch that file Live is .scss land now
  38. 38. One bite at a time ! ! you don’t have to use everything at once
  39. 39. WordPress Integration ! !
  40. 40. Update functions.php ! ! Use style.css (old way) Use css/global.css (new way)
  41. 41. Stripped down style.css ! ! ! • comments for theme details • alert future developers about the theme using Sass
  42. 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. 43. Gravity Forms ! !
  44. 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. 45. Additional Tools ! !
  46. 46. ! • CSS3 mixins • helper functions (colors, math, and much more) • generate sprites dynamically
  47. 47. Susy ! ! ! • Sass grid system (or not) • creates layouts using mixins • calculate column and gutter widths
  48. 48. Breakpoint ! ! ! • media queries with Sass • includes lots of helpful tools
  49. 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. 50. Resources ! ! ! • sass-lang.com • sassmeister.com • Compass • Susy • Breakpoint • Sass for Web Designers • CSS Tricks Screencast
  51. 51. Thank You! @greenhornet79
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×