Using SASS with Wordpress (Become an expert)

In this and the next recipe, we're going to take a look at using the Bones theme in WordPress, which incorporates SASS, and will save us a great deal of time. We will work through installing it, familiarizing ourselves with the theme structure, and make some changes to see how it works.

Getting ready

For this recipe, you're going to need a few things, in addition to your choice of text editor:

• A working installation of WordPress – either on a local or remote server (sorry but this won't work for Wordpress.com sites, as it doesn't support the use of the @import tag, which we will be using in this recipe). For this recipe, I will assume you are using a local copy of WordPress (version 3.4.2 at time of writing), hosted through WAMP.

• A copy of the open source WordPress Bones theme, which you can download from http://themble.com/bones/.

• A working installation of Scout, configured to watch the scss folder in the Bones theme (as indicated in the recipe).

How to do it...

1. Let's begin by extracting the theme from the ZIP archive you've downloaded. Inside you will see a folder with a name similar to eddiemachado-bones-53d7155; extract it to your WordPress theme folder, and rename it to bones.

2. Activate the Bones theme in the theme admin area in WordPress, in the normal manner.

3. Navigate to \bones\library within your WordPress theme folder in Windows Explorer. Inside, you will find a number of folders; one of this is called scss, which contains the SASS files for the Bones theme.

   Note

   If you're expecting to edit the style.css file, but don't find any code, don't worry. Bones has been developed to work with the contents of the \library file as its CSS source. The main style.css file in the root of the theme is there to purely allow WordPress to recognize the theme in the admin gallery only.

4. Go ahead and open up _base.scss from within the scss folder, in Sublime Text 2, and look for the #content style on or around line 245.

5. Alter the code as shown:

   #content { margin-top: 2.2em; background-color: #D5AEAB; margin-left: auto; margin-right: auto; width: 60%; }

6. Save the changes, then copy the three recompiled files from the scss folder to the css folder, as we did in step 3, and refresh your browser window. It will have shrunken the main content area to 60 percent of the width, and added a purple background.

7. Okay, let's do the same with the header. Look for .header{} on or around line 153 in _base.scss. Alter the style to the following line:

   .header { margin-left: auto; margin-right: auto; width: 62.5%; }

8. Save your work, then copy the style.css file over to the css folder, in the same way as we did in step 7. Refresh your browser view and notice how the header has been moved into the center, in the same way we did for the content area.

9. Now we're going to make two more changes to the style sheet. First, look for .footer, on or around line 819, and alter it as follows:

   .footer { clear: both; margin-left: auto; margin-right: auto; width: 62.5%; }

10. Finally, let's add in a slight adjustment to the text in the footer – it looks a little cramped and could use some color:

    .copyright { background-color: #EEE; padding: 5px; }

11. If everything has worked, we'll end up with something similar to the following screenshot, when you preview it in a browser:

    

How it works...

In this recipe, we've installed a copy of the Bones theme into a working installation of WordPress and begun to navigate around the SASS partial files, and made some minor changes. I know, before you say anything, it's certainly not going to win any prizes for style! But it highlights a useful point; it is perfectly possible to use SASS in a CMS environment. Indeed, it is almost essential in some respects, if only to manage the large number of lines of code effectively.

We've pulled in a number of concepts that we've covered throughout this book, such as mixins, functions, partials, importing, and more. It may seem somewhat complicated, but if you spend any time developing in WordPress, it will be worth spending time just going through the code, so that you can learn how the theme works. It is important to bear in mind though that a fair amount of the functionality you might otherwise have expected to see, won't be there – the developers did this intentionally as they wanted the theme to act as a base for your own development. After all, it's easier to add functionality, then to take it away!

We have now reached the final recipe in this book – don't worry, it's a nice easy one! We're going to stay with the theme of working with WordPress, and look at how you can use Compass to provide additional vendor support for CSS3 styles.