susy-compass - SUSY の異なるブレークポイントでスパン列をオーバーライドする方法

Question

susy がどのように機能するかについて、何か基本的なことが欠けているに違いないと思います。ドキュメントには、これがどのように機能するかを理解するには例が少なすぎます。

異なるブレークポイントで異なるレイアウトが必要です。そこまではできますが、トリガーされたブレークポイントに応じて、要素が異なる数の列にまたがるようにします。したがって、次のようなモバイル用の一般的なスタイルシート (「モバイル ファースト」) があるとします。

 .wrapper{
        .element1{
            @include span-columns(4);
        }

        .element2{
            @include span-columns(2 omega);
        }
}

しかし、幅が「タブレット」に変更され、8 列のレイアウトに変更されたら、これを次のように変更できるようにしたいと考えています。

     @include at-breakpoint($tablet-break $tablet-layout){
         .wrapper{
        @include set-container-width;
            .element1{
                @include span-columns(5);
            }

            .element2{
                @include span-columns(3 omega);
            }
    }
}

これはモバイル設定を「上書き」しないだけでなく、firebug を検査すると、要素が新しいタブレット列と一致しないように見えます。まだ6列のレイアウトを使用していると思います。@include set-container-width を追加しても問題は解決しないようです。ただし、モバイル レイアウトをコメント アウトすると機能します。つまり、これらの include ステートメントは上書きされないかのように見えるので、susy の仕組みを理解していないと思います。要素がレイアウトと一致しないことを示す firebug の例を次に示します。

(また、SUSY のベスト プラクティスもわかりません (4 つ以上の深さでネストしないことを除く)。すべての変更に対して、ネストされた @at-breakpoint ステートメントを使用してすべての sass を定義するか、デフォルトを定義することができます ( mobile) css を作成し、別の sass ブロックをすべて at-breakpoint 内にネストして作成します。これが問題を引き起こしているかどうかはわかりません。)

アップデート

元の (モバイル) 宣言の後に at-breakpoint インクルードを含めると、うまくいくようです。コードの繰り返しが必要なようですが：

        .element1{
        @include span-columns(2 omega);
        text-indent: -1em;
        text-align: center;
        @include at-breakpoint($tablet-break $tablet-layout){
            @include span-columns(3 omega);
            text-indent: 0;                
            text-align: left;                
        }
        @include at-breakpoint($desktop-break $desktop-layout){
            @include span-columns(3 omega);
            text-indent: 0;
            text-align: left;                                
        }
    }