Why is the gutter of my semantic.gs grid always zero?

Question

I am using semantic.gs to create a grid for a webpage. I noticed that whatever I do, I never have any "gutter", meaning in CSS the margin is calculated to 0, despite leaving the default to 20px.

So I took a step back and tried to reproduce this very simple official example:

http://semantic.gs/examples/fixed/fixed.html

The output of my attempt is here:

http://jsfiddle.net/QXpcq/

As you can see, again there is no gutter. The markup is the same, the output CSS is not. My output CSS always shows a margin of 0. You would think this is perhaps due to my input being different from the example, but as far as I can see, it's not. I'm using SCSS, as follow:

@import 'compass';
@import 'grid';

// Specify the number of columns and set column and gutter widths
$columns: 12;
$column-width: 60;
$gutter-width: 20;

// Uncomment the definition below for a percentage-based layout
// $total-width: 100%;


////////////
// LAYOUT //
////////////

// center the contents
div.center {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

// header
header#top {
    @include column(12);
    margin-bottom: 1em;
}

// main and sidebar
#maincolumn {
    @include column(9);
}
#sidebar {
    @include column(3);
}

I have snipped the reset CSS code and the CSS that styles the colors and such in the demo. Trust me, they are an exact copy and paste of the official demo as you can see in the fiddle.

The "grid" import is the official download of the grid mixins. I didn't change it. The big mystery here is why with the same markup and SCSS I get different results?

Could it be due to my compilation process? I'm using the Scout app to monitor my SCSS folder. It picks up any change to it and compiles it to CSS.