susy-compass - 如何在 Susy 2.0 中为容器添加左右填充

Question

我正在使用 Susy 2.0。我正在构建一个固定宽度的站点(将在稍后阶段变得响应)。但是，我认为我的问题适用于将 Susy 用作静态或流体时。

这是我的全局设置:

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: static, 
 gutters: 1/3,
);

根据关于静态站点的 Susy 2.0 文档，我将容器设置为自动，并让列宽设置决定容器元素的宽度。

我想对容器应用一些左右填充，这样当移动设备上的视口(viewport)变窄时，两边都有一点呼吸空间，等等。

这样做的最佳方法是什么？如果我只是将 padding-left 和 padding-right (在纯 CSS 中)应用于我的容器元素，这会破坏网格。容器不再足够宽以包含 Susy 的列宽计算。

我在我的 CSS 中将“box-sizing”普遍设置为“border-box”。如果我在我的容器元素上使用“内容框”覆盖它，则网格的行为正确。实际上我预料到了相反的情况？

将 'box-sizing: content-box' 应用于我的容器元素的解决方案是什么？或者我可以在 Susy 中应用我缺少的设置吗？我觉得大概有。如果可能，我宁愿让 Susy 处理所有网格计算。

我的问题也适用于响应式/流体设计，因为即使我给容器设置了特定的宽度并删除了“列宽”和“数学”设置，我仍然遇到同样的问题。

Answer 1

对于网格填充，我通常会做这样的事情。效果很好，不需要进一步的复杂化:)

.container {
  @include container($susy); 
  padding-left: 15px; 
  padding-right: 15px; 
}