sass - ブレークポイントのあるネストされたグリッド

Question

ネストされた 2 つのグリッドに susy を使用したいと考えています。1 つはページ レイアウト (左側のメニュー、右側のコンテンツ) を定義し、もう 1 つは の内部contentです。

その理由は、さまざまなテンプレートを使用できる CMS によってコンテンツが作成されており、scss コードをテンプレートと一緒に使用したいからです。流体グリッドを使用すると、まさにその問題を解決できるようです。

<div class="page">
    <div class="menu">
        <ul><li>foo</li><li>bar</li></ul>
    </div>
    <div class="content">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</div>

@import "susy";

/* Outer Grid  (Page Layout) */
$total-columns  : 4;
$column-width   : 1024px / $total-columns;
$gutter-width   : 0px;
$grid-padding   : 0px;
.page {
    @include container;
    .menu {
        @include span-columns(1);
    }
    .content {
        @include span-columns(3);
    }
}

/* Inner Grid */
$total-columns  : 1;
$column-width   : 200px;
$gutter-width   : 0px;
$grid-padding   : 0px;
$container-style: fluid;
.page .content {
    @include container;
    .item {
        @include span-columns(1);
    }
    @include at-breakpoint(3) {
        @include container;
        .item {
            @include span-columns(1);
        }
    }
}

私の問題は $column-width: 200px; です。内側のグリッドについては、生成されたメディア クエリが min-width: 600px を使用するため、この時点では 75% の幅しか使用できません。

これを実装する最良の方法は何ですか?