SASS/Bourbon/Neat：如何在網格外添加邊距？

Question

我正在使用Neat的12列網格。該頁面由拉伸全部網格寬度的部分組成。本節背景不同於頁面的背景：

正如你可以看到，粉色款的左手側是與電網的邊緣齊平。我想要的是該部分的左側用幾個雷姆來突出網格。

但是，如果我添加一個邊距，該部分會調整大小以適應網格內部。

這是整潔的混入：

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

結果：