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

Question

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

​

​

如您所见，粉色部分的左侧与栅格的边缘齐平。我想要的是让这一部分的左侧由几个rems悬垂在网格上。

但是，如果我添加一个页边距，该部分的大小将调整为适合网格。

这是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;
}

结果如下：

​

​