嵌套元素具有不同的填充值

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文件中一样

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

正如您在装订线

旁边看到的上面的代码，我添加了像素值，第一个装订线产生62.0625px，第二个41.375px。

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

Answer 1

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

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