css - SASS/波旁威士忌/整洁 : How can I add margins outside grid?

Question

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

如您所见，粉红色部分的左侧与网格边缘齐平。我想要的是该部分的左侧超出网格几个雷姆。

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

这是 Neat 的 mixin:

@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;
}

结果: