Getting Compass to Compile in VS2013 Web Essentials

TLDR

If you are looking to use Compass in your own project and need a version that compiles in Visual Studio 2013 using Web Essentials - download this copy of compass.

Step 1 - Update Visual Studio 2013

At the time of this writing the latest update to Visual Studio 2013 is RC 3. Also, if you want to use the nightly build of Web Essentials, you’ll need this update.

http://www.microsoft.com/en-us/download/details.aspx?id=43721

Step 2 - Get the Nightly Build of Web Essentials

At the time of this writing, Web Essentials is getting some pretty heavy updates every day. I don’t recommend ever grabbing the nightly build of any product or plugin automatically, but in this case you’ll want to use the latest features. Instructions with screenshots have been provided on the following page:

http://vswebessentials.com/download

Step 3 - DIY or Download this File

Compass hasn’t changed a lot the past couple of months but if you desire the freshest copy possible, then head over to the Compass project on GitHub and download the latest release. Once you have the SCSS files imported into your project, you need to go through them one by one updating the @import references.

The Compass compiler basically knows where Compass files are located already so these URLs just work. But Web Essentials uses relative paths. So these paths need to be updated throughout the Compass project. EG:

Compass Does ThisWeb Essentials Needs This

“/compass/css3/shared”

“shared”

Otherwise, if all this seems like to much work (it is) just download this copy of compass. Also be sure to follow Mads Kristensen, author of this project.