A few weeks ago I spoke at WordCamp Kansas City on Using Sass in Your WordPress Projects. My goal was to demonstrate the power that using a CSS preprocessor could add to a front end developer’s workflow. I started using Sass over a year ago and it has dramatically increased my CSS authoring speed.
You can watch the presentation on WordPress.tv, or read on to learn more about using Sass with WordPress.
Sass offers a lot of amazing tools, but I have a few favorites that I use consistently on ever WordPress theme I build. It can be easy to get overwhelmed by the amount of things Sass can do, but you don’t have to use everything at once. Start out by using one or two features on your first Sass project. After you get comfortable with those, learn the more advanced features. The important thing to remember is ultimately you are still just writing CSS.
A Few of My Favorite Sass Features
Nesting
Nesting is my favorite feature of Sass. It allows you to “nest” selectors inside of each other, instead of having to rewrite selectors for each new rule. This makes writing CSS faster because there less selectors you have to type. It also automatically groups related selectors together, making your CSS easier to read and more maintainable. In the example below you can see that I only have type the .nav selector once in my Sass file.
Play with this gist on SassMeister.
Variables
Another feature I use all the time is variables. Variables in Sass work just like variables in other programming languages. You define a variable in one place and then use it throughout your project. If you need to change the value halfway through a project, you only have to do it in once place. No more running find and replace through the entire CSS file.
Variables are helpful for things like brand colors. Instead of having to remember a crazy hex value, you can assign it to an easy to remember variable name and use that throughout the project.
Play with this gist on SassMeister.
Mixins
Mixins bring the power of functions into CSS. When you find yourself using a lot of the same rules over and over again, but with slight variations, mixins can help speed up your workflow. The classic use case is CSS3 vendor prefixes. Instead of writing the same vendor prefixes over and over, you can create a mixin (think function) that accepts a parameter and spits out vendor prefixes for you. The win here is speed. You write the mixin once, and then you can call it anywhere in your project.
Play with this gist on SassMeister.
Using Sass in WordPress Themes
Now that you have an idea of the power of Sass, you’ll need to make a few changes to include it in your WordPress themes. Sass compiles your .scss files into .css files for you. However, it won’t compile them into the standard WordPress style.css file at the root of your theme. The compiled CSS will be in a folder probably named css (you can alter this in Sass config file). Thankfully, this is easy to fix.
1. Update CSS path
Since WordPress uses wp_enqueue_style() to print the link tag in the header of the theme, all you need to do is update the function in your functions.php file to point to your compiled css file. Here’s an example of the updated function, assuming that your compiled css file is called global.css.
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/css/global.css' );
2. Update style.css file
In your standard WordPress style.css file you still need to have CSS comments telling WordPress your theme’s information, like theme name and description. Other than that, I leave the style.css file blank. It can also be helpful to leave a comment alerting future developers that the theme uses Sass.
Those are the only two steps you need to start using Sass in your WordPress projects today. Remember, you don’t have to learn or use every feature of Sass in every project. If all you ever use is nesting it would still be a huge improvement over writing vanilla CSS.
Additional Resources
Here is a list of resources for getting started with Sass, as well as a link to my presentation at WordCamp Kansas City.
