/ >

Installing Compass

A brief overview of acquiring and installing compass in a Visual Studio environment.

Installing Compass

I found it extremely difficult to find anywhere that would tell me in simple terms which files I had to download, where to put them and how to run them when I was trying to install compass for the first time.

I work with .Net, so when every website ever is telling me to install ruby and download the gem via the command line, it just felt wrong. I know how SASS works and I know that I don't need to use the ruby command line to create or add .scss files to my project.

Essentially it came down trial and error, and I thought it a good idea to document my steps for others with the same issue.

Installing Compass on a visual studio project

First of all, I downloaded the source files from github (took a little digging, but you can grab it here). Within this release, there is so much gumph that it was difficult to find what I needed to put where.

If you unzip the download, and then navigate from the top folder through to /core/stylesheets/ and just copy the folder compass and the file _compass.scss into your project folder structure. I usually find the best way is to have a Sass folder in the top level, and a css folder, and set the Sass files to write to the css folder. I will cover how to do that shortly.

If you already have a compiler installed, you can just create a new .scss file in your Sass folder and then at the very top do an import:

@import "compass";

Save the file and it should compile. All this does is import the compass partial (_compass.scss), which in turn imports a few of the library files which import their own subset of routines. So all we need to do is import one file and the rest comes along for the ride!

Installing a compiler

If you don't have a compiler installed, there are a lot out there, but only one I found that suited my needs and worked with Visual Studio Express. Its Web Essentials. I would recommend installing this anyway, as it gives loads of cool features to Visual Studio.

Download it from the link above, make sure Visual Studio is up to date, and then install. When you restart VS, and open a project, you should have a new option in the top menu - Web Essentials.

Now when you create an .scss file, it should compile into css as you save the file. Point your css links or bundles to the css output (it appears under the .scss file in the solution explorer, but in the folder structure it it in the same level) and you are good to go.

Customising Web Essentials

There is a lot you can customise with Web Essentials. It you go to the menu in VS, head to Tools > Options and in the right hand pane select 'Web Essentials'. And if you expand it, you can choose options for all the different file types it handles.

Something I have seen a lot of people complain about on forums is the lack of detail in error messages when the compiler fails. By default, it just says "Something went wrong", or "Syntax Error". But it doesn't tell you where, or anything more than that. However, if you set it to compile using the Ruby runtime, you get a whole bunch more detail in your errors, line numbers and specifically what failed.

To turn it on, go to the Options menu again, expand Web Essential, click onto SASS, and set Use Ruby Runtime to True. Its a bit slower to compile, but its worth it for the error messaging.

In that same options menu, you can set your output folder for the compiled css. I usually have my SASS files stored in /Sass, and so I set the output to /css. That way you don't have to publish the Sass files to your website or have your css files sitting under a Sass directory in the live environment. It's a personal preference I suppose.

There are loads of other customisable options in Web Essentials so you can set up your Sass environment exactly the way you want it. I hope this is helpful - I spent ages looking for a simple way to install Compass, and everywhere I looked seemed to needlessly over-complicate it. You don't need to install Ruby directly (Ruby runtime is built into Web Essentials), learn a new command line language and mess about with gems - you can literally drag and drop the files. And now you know which ones.

Other Resources:

There's no more content down here, what's with the crazy scrolling...