Nest元素具有不同的填充值

Question

我花了几个小时来搞清楚但没有运气，所以基本上我有这个配置

$susy: (
    columns: 12,
    gutters: 54px/53px,
    container: 1230px
);

在我的布局文件_layout.scss中，我就是这个

@include layout( $susy inside );

.content-area {
    padding-top: gutter( 6 );

    .layout-2c-l & {
        @include span( 8 of 12 no-gutters );
        @include gutters(5); // 62.0625px
    }

    .archive.layout-2c-l &,
    .search.layout-2c-l & {
        padding-left: 0;
        padding-right: 0;
    }
}

在我的情况下，在存档和搜索页面上，我要删除排水沟，然后通过它的子元素重新添加它，如_archives.scss file

.page-header {
    @include gutters(5); // 41.375px
}

正如您可以看到上面的代码，我添加了像素值，第一个排水沟产生62.0625px，第二个排水沟41.375px。

如果这是susy的工作方式，有没有办法得到相同的结果？

Answer 1

除非您在Susy配置中设置math: static，否则Susy将根据您提供的%输出context值。如果您告诉它您处于5这两个位置的上下文中，您将获得相同的%输出 - 但如果父容器实际上不是，则会转换为不同的px值宽度相同。因此，gutter(5)只应在父元素跨越5列的位置使用。

很难从您的稀疏代码示例中看出，但看起来您可能正在使用gutter context参数与其预期方式不同。如果使用得当，您将始终获得一个装订线~54px（因为这是您的设置指定的内容）。