SASS / Bourbon / Neat：如何在网格外添加边距？

Question

我正在使用Neat的12列网格。该页面由拉伸网格整个宽度的部分组成。部分背景与页面背景不同：

如您所见，粉红色部分的左侧与网格边缘齐平。我想要的是该部分的左侧悬挂在几个地方的网格上。

但是，如果我添加一个边距，则该部分会调整大小以使其适合网格。

这是Neat的混音：

@mixin outer-container($local-max-width: $max-width) {
  @include clearfix;
  max-width: $local-max-width;
  margin: {
    left: auto;
    right: auto;
  }
}

这是我的风格：

.page-section {
    @include outer-container;
    @include span-columns(6);
    background: tint(red, 80%);
}

它在左侧给出了正确的悬垂，但在右侧没有。无论我是使用负边距还是填充，我都无法使右侧悬垂。

.page-section {
    @include outer-container;
    margin-left: -2rem;
    padding-left: 2rem;
    margin-right: -16em;
    background: tint(red, 80%);
}

是否有正确的方法强制网格外的左右边缘？欢迎任何帮助！

Answer 1

解决了它。使用calc()并放弃outer-container() mixin就可以了。

.page-section {
    background: tint(blue, 80%);
    @include span-columns(12);
    width: calc(100% + 8rem);
    margin-left: -4rem;
    padding: 4rem;
}

结果：