WordPress
Article

Sass for WordPress Developers

By James Steinbach

Sass for WordPress Developers

There are many benefits of Sass for WordPress developers. You’ve probably heard many arguments for using a pre-processor by now. CSS pre-processors provide the opportunity for better code organization by using partials and nesting styles. Pre-processors help developers style faster by writing mixins and functions. Pre-processors also allow us to write more maintainable, scalable code with logic and variables.

Convert a Stylesheet to Sass

The best way to start using Sass in WordPress development is to use a theme that has Sass files included. The Underscores theme is my favorite starting place for a new theme. However, if you’re starting with a theme that doesn’t have Sass files included, you’ll need to convert the existing stylesheet to Sass.

The good news is that if you’re using the .scss syntax (which I recommend), your existing CSS is all valid Sass. You can simply copy style.css to style.scss and that .scss file will compile properly.

Setting Up Partials

At this point, you’ve got a long .scss file with just as much code as your original CSS file. You can now use variables and mixins, but this still isn’t organized better yet. We can get some much-needed organization by breaking the long stylesheet up into smaller files. Copy each “section” of style.css to a separate .scss file in your Sass folder. Name this file after what it contains with an underscore prefix. For example, your styles relating to your navigation go to _navigation.scss.

Once you’ve moved code to a partial, you’ll need to import that partial in your main style.scss file. Essentially, you’ll copy all the navigation code to _navigation.scss and replace it in style.scss with an import command. Note: the file name in the import does not have the underscore or the extension.

[sass]
@import ‘navigation’;
[/sass]

CSS is still cascades (earlier styles are overridden by later styles of the same specificity), so be sure to keep these @import statements in the order you need for your final output.

Refactor as Necessary

Once you’ve broken the long stylesheet into smaller partials (so you can find code more easily), you can work on refactoring those partials. This step helps make things easier to maintain, but I wouldn’t consider it essential. One way to refactor is to nest selectors. If you have several styles defined with in a certain parent selector, you’ll have this in your original stylesheet:

[sass]
.header .logo {
//styles
}
.header .tagline {
//styles
}
.header .menu {
//styles
}
[/sass]

You can refactor those styles to make them easier to scan and edit by nesting the child selectors like this. The following block of Sass will compile to the same CSS we had above.

[sass]
.header {
.logo {
//styles
}
.tagline {
//styles
}
.menu {
//styles
}
}
[/sass]

You can also refactor by replacing repeated prefixed properties with short mixins.

[sass]
.menu a {
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
[/sass]

A mixin can do the same thing. Note: I haven’t include the @mixin statement here: I recommend using the Bourbon or Compass mixin libraries for standard things like this.

[sass]
.menu a {
@include transition(color 0.2s);
}
[/sass]

Further note: I actually don’t recommend using mixins for prefixing: AutoPrefixer is a much better solution, but that’s a different article.

Compile Your Sass for WordPress

Now that we’ve broken the big style.css file down: how do we put it back together?

Compiler Requirements

WordPress has a few unique requirements for the CSS output. This file needs to be named style.css, it must live in the theme root, and it needs a special block of WordPress comments at the top.

In addition those WordPress-specific considerations, I’d also add the following requirements for our compile process. It’s best to keep all the Sass files in a subdirectory (/sass/) so we can keep the theme root clean. We should also be able to compress CSS output for our deployed code.

GUI Compile Methods

If you prefer an app to compile your Sass, the following apps provide a GUI for selecting and watching folders of .scss files.

CLI Compile Methods

I don’t use those apps often: I prefer the command line. There are two tools to compile your Sass from the command line: Sass and Compass. You can find instructions for installing Sass and Compass as command line tools (Ruby gems): Sass / Compass.

Sass’s CLI provides the sass command for compiling a Sass input file to CSS output: sass style.scss:style.css. Of course, re-running that command every time you change something in your Sass partials isn’t ideal. You can add the --watch parameter and Sass will watch the .scss file (and the partials it imports) and compile every time it detects a change: sass --watch style.scss:style.css.

We can improve our compile method even more by using Compass instead of Sass. The biggest benefit of Compass is that it operates on a config.rb file. You can save your configuration options (expanded vs. compressed, input & output directories, etc) in a file, then tell Compass to watch and compile your Sass by running compass watch in the directory that contains config.rb.

Here’s how I use my Compass config.rb file:

  • It lives in /{theme-name}/sass/
  • It ouputs style.css up a level to the theme root: css_dir = '..'
  • The .scss files live in the /sass/ directory: sass_dir = ''
  • During development: output_style = :expanded
  • For deployment: output_style = :compressed

WordPress style.css Comments

As we noted above, WordPress requires some specific comments at the top of the theme stylesheet. We can control those in style.scss in our /sass/ directory. Since Compass will remove comments with output_style = :compressed, we’ll need to start the comment block with an exclamation mark (!) to preserve these comments.

[sass]
/*!
Theme Name: Sassy Theme
Theme URI: http://jamessteinbach.com/themes/sassy/
Author: James Steinbach
Author URI: http://jamessteinbach.com
Description: From CSS to Sass Sample Theme Code
*/

//import all your partials
[/sass]

Organize Your Partials

Now that we know how to turn a stylesheet into Sass and put it back together, let’s talk about how to organize your Sass partials. The first thing to keep in mind is that cascades still matter. Make sure to import your broadest styles first and your most specific styles last.

You can use folders to organize your partials. For a partial in a folder, your @import statement would include the directory name like this:

[sass]
@import ‘base/variables’;
// imports _variables.scss from the /base/ directory
[/sass]

There are many ways to group your partials into folders. The “Sass Resources” list below contains some good philosophies for organizing partials. Here’s one example:

  • /base/ (variables, mixins, reset, typography)
  • /layout/ (grid, header, footer)
  • /vendors/ (plugins, vendors, etc)
  • /components/ (buttons, menus, forms, widgets)
  • /pages/ (home, landing page, portfolio)

Underscores.me Sass Structure

Sass Resources

We’ve just scratched the surface of using Sass to build WordPress themes. If this is your first read on the topic, you might be wondering, “Where do I get more information?” The following lists provide more information on methods for using Sass for WordPress development. Some of their advice differs from this post: you can follow the path that works best for you.

Additional Sass Reading

If you have other resources to recommend or lessons to share, please post them in the comments!

More:

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • http://29thfloor.com 29thfloor

    Totally forgot about the comments at the top of style.css. I’ve built several custom themes for clients in the past few months using Sass and just left them out.

    The good news is, everything still works. But when you look at the active theme in the WordPress admin, there’s no information listed. It just says “by Anonymous”.

    • http://www.reformadesites.com.br Matteus Barbosa

      thats right, but as you see its easy to fix this since you don’t forget to mark them up with the exclamation right on the start after ” /* ” just like this : ” /*! “.

      • http://yourauthenticweb.com/services/web-design/ Ashley Pajak

        That is definitely a helpful tip! Thanks

  • Husain Ahmmed

    Thanks for this info

  • http://www.complet-it.com/ Mincă Daniel Andrei

    Just use NetBeans CSS Preprocessors, specify the css and scss directory, and it will compile after save, no need to complicate yourself with compilers…
    Also NetBeans has a WordPress plugin that can add all those commented lines and many other features.

    • http://www.reformadesites.com.br Matteus Barbosa

      what a great tip! thanks

      • http://www.complet-it.com/ Mincă Daniel Andrei

        Your welcome!

  • Stephan Lück

    i use the config.rb from Chris Coyer’s article or prepros http://alphapixels.com/prepros/ is for me a better solution instead of scout

  • Matteus Barbosa

    this tuto was my starting point to know how great is sass. thanks alot sitepoint, keep the thang at high level!

  • Muhammad Wasim

    This is a great introduction of using Sass with WordPress. Using the Build tools such as Gulp and other modules such as browsersync can make the workflow ever smoother as explained here: http://wasimbhalli.com/configuring-gulp-and-browsersync-for-wordpress-_s-theme/

  • http://davidscanu.fr/ David Scanu

    I use _s Underscores with SASS and compile using Codekit 2 (with many great new feature such as auto-refresh on multiple platforms at the same time, …).

    I really like the tip about the exclamation mark in the top comment.

    Thanks for this great article.

  • Mirko Klees

    There is a WordPress SASS compiler Plugin out. Did anyone tried this? Sounds very interesting.
    https://wordpress.org/plugins/sass-compiler/screenshots/

  • Bankole Dada

    wow.. great platform to learn and unlearn!

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in WordPress, once a week, for free.