Using Sass in Your WordPress Projects
1 like2,117 views
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.
Using Sass in Your WordPress Projects
- 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
- 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
- 21. Mixins
- 22. ! • accepts parameters like a function • use for tedious tasks like vendor prefixes • reusable block of CSS, but with parameters
- 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
- 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
- 33. Watch your files
- 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
- 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
- 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
- 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