为什么我的semantic.gs网格的阴沟始终为零？

Question

我使用semantic.gs为网页创建网格。我注意到无论我做什么，我都没有任何“阴沟”，这意味着在CSS中，保证金计算为0，尽管默认为20px。

所以我退了一步，试图重现这个非常简单的官方例子：

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

我的尝试输出在这里：

http://jsfiddle.net/QXpcq/

如你所见，再没有阴沟。标记是相同的，输出CSS不是。我的输出CSS总是显示0的边距。你会认为这可能是由于我的输入与示例不同，但据我所知，它不是。我正在使用SCSS，如下：

@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);
}

我已经剪断了重置的CSS代码以及在演示中对颜色进行样式化的CSS。相信我，他们是官方演示的精确复制和粘贴，你可以在小提琴中看到。

“grid”导入是grid mixins的官方下载。我没有改变它。这里最大的谜团是为什么使用相同的标记和SCSS会得到不同的结果？

可能是由于我的编译过程吗？我正在使用Scout应用程序来监控我的SCSS文件夹。它接受任何更改并将其编译为CSS。