Setup Sass and Compass for WordPress

In this tutorial we'll be looking at how you can setup sass for WordPress themes.

Pre-requisites

Before you dive into this tutorial, as a starting point it's expected that you've got WordPress installation up and running in a local environment. To setup a local server environment you might want to checkout software like WAMP or MAMP, to get setup with a WordPress site head over to WordPress.org.

Installing Ruby

First off you'll need Ruby installed on your machine as this is a dependency for Sass. Install Ruby for windows using the installed: http://rubyinstaller.org/ or for linux check out Rails Ready. When installing Ruby check the option to allow executables to be added to your PATH so that it will be available on command line. 

Confirm this is set up correctly by opening a terminal and typing 'gem' the ruby package manager.

Installing Sass

With Ruby package manager installed (gem), you can now install Sass and Compass from the command line. Open a terminal and type the following:

gem update --system

If you get SSL issues with this command you may find this article useful, for Windows users this article shows you how to create a pem file. This will make sure ruby is up to date. 

gem install sass

gem install compass

Configuring Sass with our WordPress theme

Now onto the configuration...

Files and Folders

Create or ensure you have the below folders and files inside your theme directory:

  • images
  • sass
    • style.scss
    • _partials
      • mixins.scss
      • variables.scss
      • typography.scss
  • config.rb

Note how you break down the files inside your _partials directory is optional, the above titles are a suggested starting point.

The last final is a ruby file, which Sass is built on. This will tell Sass and Compass where all the files are located.

Ruby config.rb file

Populate your config file with the following lines:

# Root path
http_path = "/"
css_dir = "."
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

# Preferred output style
output_style = :nested

# Development environment
environment = :development

# Relative paths to assets
relative_assets = true

Setup the sass style file

Next you need to setup the sass file so it knows what to build. Open up the style.css in the root of your theme and copy the opening comment along with the following lines into the style.scss file. It should look something like this:

/*
Theme Name: Code Synthesis
Theme URI: http://www.codesynthesis.co.uk
Description: Codesynthesis theme.
Version: 1.0
Author: David Bainbridge
Author URI: http://www.codesynthesis.co.uk
*/
@import "_partials/mixins";
@import "_partials/variables";
@import "_partials/typography";

The comment is copied as the contents of this file (and the listed files) will be built into the style.css file overriding existing content. Thus, if there's any additional styling you want to keep, place it in this file or in another partial file.

Set Compass to watch the files

With everything configured, you can now run the following on command line to get Compass to start watching our files for any changes:

cd /wp-content/themes/your-theme

compass watch

Populate the partials

So to demonstrate this all now works, let's populate our parital files with some css:

mixins.scss

/* mixins.scss */

variables.scss

/* variables.scss */
$primary-text: #dd0000;

typography.scss

/* typography.scss */
body{
    color: $primary-text;
}

With the compass file watching, if you check your style.css file now, it should be built with the combination of your partials and the header from your style.scss file. 

Get Sassy

That's it for the setup! In an upcoming article we'll take a look at the Sass language.

Sign Up

NEXT: Auto expand retweets in an embedded twitter timeline widget

How to auto expand retweets and favourites in an embedded twitter timeline widget.

comments powered by Disqus
Sign Up

Popular Tags

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.