0

我想我一定遗漏了一些关于 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);
            }
    }
}

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

跨度不匹配的列

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

更新

看来，如果我在原始（移动）声明之后包含断点包含，它似乎可以工作。虽然它似乎确实需要代码重复：

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

0 回答 0