如何在SUSY中覆盖不同断点处的span-columns

Question

我认为我必须遗漏一些关于susy如何工作的基本内容，而且文档中只有很少的例子可以理解它是如何工作的。

我想在不同的断点处使用不同的布局。我可以做到这一点，但我希望我的元素跨越不同数量的列，具体取决于触发的断点。所以如果我有一个通用的移动样式表（'mobile-first'），比如：

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

这似乎不仅没有“覆盖”移动设置，而且在萤火虫检查时，它看起来元素与我的新平板电脑列不匹配。我认为它仍然使用6列布局。添加@include set-container-width似乎无法解决问题;但是，如果我注释掉它的移动布局，它就有效。所以几乎就好像这些包含语句不会覆盖，所以我想我不理解susy是如何工作的。这是一个显示元素与布局不匹配的firebug示例：

（另外我不确定任何SUSY最佳实践（除了不要超过4深度）。我可以使用嵌套的@ at-breakpoint语句为我的所有更改定义所有sass，或者我可以定义我的默认（移动）css，然后创建一个单独的sass块全部嵌套在断点。我不知道这是否导致问题。）

更新

看来，如果我在原始（移动）声明之后包括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;                                
        }
    }