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

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 context 参数可能与预期不同。如果使用得当，您总是会得到一个装订线 ~54px（因为这是您的设置指定的内容）。

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

Nest elements has different padding value

susy