sass - なぜ私のセマンティック.gsグリッドのガターは常にゼロなのですか?

Question

Webページのグリッドを作成するためにsemantic.gsを使用しています。何をしても、「ガター」がないことに気付きました。つまり、CSS では、デフォルトを 20px のままにしているにもかかわらず、余白が 0 に計算されます。

そこで、一歩下がって、この非常に単純な公式の例を再現しようとしました。

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 を切り取っています。私を信じてください、フィドルでわかるように、それらは公式デモの正確なコピーアンドペーストです.

「グリッド」インポートは、グリッド ミックスインの公式ダウンロードです。私はそれを変更しませんでした。ここでの大きな謎は、なぜ同じマークアップと SCSS を使用しても異なる結果が得られるのかということです。

私のコンパイルプロセスが原因でしょうか？Scout アプリを使用して SCSS フォルダーを監視しています。それに対する変更をピックアップし、CSS にコンパイルします。