We've been through a real whistle stop tour of SASS and seen how it works – let's finish on a nice easy demo, which looks at how you can use Compass to provide vendor prefix support to our Bones theme in WordPress.
For this recipe, you will need your trusty text editor (preferably Sublime Text 2). You will also need Scout up and running, and configured to scan the \bones\library folder in your WordPress theme folder. We'll also need the Bones theme from the previous recipe. For the purposes of this recipe, I will assume that the settings remain unchanged from the previous task.
Let's make a start by opening up a copy of the
_mixins.scssfile in the\bones\library\scssfolder within the Bones theme. This contains all of the CSS3 mixins that we will work on.On or around line 18, add in the following line to call in Compass:
@import "compass";
Move down to the
border-radiusmixin, that starts on or around line 161:
Let's comment out this mixin, as we're going to move to using the Compass version.
Compass' version of
border-radiusis the same format as the one used in the Bones theme, so there is no need to change it in the Bones code. Go ahead and save your work. Check in the\bones\library\scssfolder, you should find a freshly compiledstyle.cssfile. Copy this (and the other two –login.cssandie.css) to thecssfolder underneath\bones\library.To check that it has worked, open up the
style.cssfile within\bones\library\css, and look for the.buttonsclass on or around line 638. You should find the compiled code forborder-radius.Let's go for something little more involved – we will replace the
box-shadowmixin, currently in use at line 204 with the version from Compass.Comment out the line at 287, and replace it with the following line (note that the order is reversed in comparison to that used by Bones):
@include box-shadow(lighten($bones-blue, 16%) inset 0 0 3px);
Save and recompile your work, then copy the updated CSS file to
\bones\library\css. If you open up thestyle.cssfile from within that folder, you will find thebox-shadowstyle in use at line 824.
Although we've only scratched the surface with the changes we've made, it opens up a wealth of possibilities of what you can do in WordPress using Compass, or even any other similar mixin library. The same principle was used in both cases in this recipe – we've inserted a reference to Compass, found the mixin we're going to replace, and then removed the original. We've either left the original reference further down the _mixins.scss file as is, or altered it to fit in with the format used by Compass, then saved and recompiled the file.
One question that you may ask though is – why do it? The answer is simple: you could spend time maintaining vendor prefixes, which will come and go over time, or you could get someone to do it for you! There's no real technical necessity to do this, it is entirely up to you how you manage it, depending on what fits in best with your work environment.
