Почему желоб моей сетки semantic.gs всегда равен нулю?

Question

Я использую semantic.gs для создания сетки для веб-страницы. Я заметил, что, что бы я ни делал, у меня никогда не было никаких "желобов", то есть в CSS маржа рассчитывается до 0, несмотря на то, что значение по умолчанию составляет 20 пикселей.

Поэтому я сделал шаг назад и попытался воспроизвести этот очень простой официальный пример:

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.