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.

Presentation Slides »