Download as PDF, PPTX
Uploaded byJeremy Green
Using Sass in Your WordPress Projects
The document discusses the use of SASS (Syntactically Awesome Style Sheets) for improving CSS in WordPress projects, highlighting its benefits such as nesting, variables, and mixins for more efficient and maintainable styles. It provides guidance on SASS integration with WordPress, installation, and practical applications particularly in plugin development and theme customization. Additional tools and resources for enhancing CSS practices with SASS are also mentioned.
More Related Content
Similar to Using Sass in Your WordPress Projects
Using Sass in Your WordPress Projects
- 1. Using Sass inYour WordPress Projects Kansas City WordCamp - July 12, 2014 !
- 2. Jeremy Green WordPress Developerat Endo Creative Organizer of the Fort Collins WordPress Meetup ! @greenhornet79 ! endocreative.com !
- 3.
- 4. Bert Bos, CSSco-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.
- 6. Putting the Powerinto CSS
- 7.
- 8.
- 9. A CSS preprocessorthat lets you write CSS: ! • faster • more efficient • more maintainable CSS with superpowers
- 10. A few ofmy favorite things
- 11.
- 12.
- 13.
- 14. ! • similar tophp variables • turn repetitive values into variables • define it once, use it throughout your projects
- 15.
- 16. ! • prepend partialswith an underscore • split CSS into maintainable blocks of code • only one HTTP request!
- 17.
- 18.
- 19. ! • reuse asnippet of CSS • does not accept any parameters • same styles as another class, except for a few rules
- 20.
- 21.
- 22. ! • accepts parameterslike a function • use for tedious tasks like vendor prefixes • reusable block of CSS, but with parameters
- 23.
- 24. ! • create amedia query mix-in • set breakpoints for your design • use logic and return content in a mixin
- 25. ! • use @includeto call the mixin • stack media queries for different breakpoints • any rules inside media query will be added to CSS SCSS Compiled
- 26.
- 27.
- 28.
- 29. Watch the files sass--watch global.scss:global.css
- 30.
- 31. The App Way Openapp, make changes, save file
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. Don’t touch thatfile Live is .scss land now
- 38. One bite ata time ! ! you don’t have to use everything at once
- 39.
- 40. Update functions.php ! ! Usestyle.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 aplugin ! ! ! • good even for small projects • use wp_enqueue_style to enqueue css file • split front and back end styles
- 43.
- 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.
- 46. ! • CSS3 mixins •helper functions (colors, math, and much more) • generate sprites dynamically
- 47. Susy ! ! ! • Sass gridsystem (or not) • creates layouts using mixins • calculate column and gutter widths
- 48. Breakpoint ! ! ! • media querieswith Sass • includes lots of helpful tools
- 49. Final Thoughts ! ! ! • Sasswon’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.