CSS preprocessors make developing clean and semantic stylesheets effortless. My talk will take someone through a basic structure for organizing Sass within a WordPress theme, using the Bones theme framework as an example.
I will go through some of the benefits and cool tricks you can implement with this structure including breakpoint includes, variables, functions, nesting, and mixins.
Finally I will address perhaps the greatest hurdle to immediately implementing Sass in your WordPress theme — compiling. I will take people through the common methods of doing this including Grunt, Compass, and WordPress plugins like WP-SCSS.
Learning Outcomes:
- Look at their current workflow and ask the question: Why am I repeating myself? And how can I automate it?
- Embrace a CSS workflow that is made up many small components instead of one large component.
- Gain familiarity we core features of Sass like nesting, variables, mixins, functions, and imports.
- Feel confident in using a library like Bourbon to write stylesheets that have better browser compatibility, all while writing less lines of code.
- Be aware of build tools like Grunt/Gulp, which can be used to compile Sass in addition to many other front end tasks.
- Feel confident in implementing Sass in a WordPress theme immediately.