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

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 列的地方。

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