如何在Susy 2.0中为容器添加左右填充？

Question

我将尽力为您进行翻译。以下是需要翻译的内容：

我正在使用Susy 2.0。我正在构建一个固定宽度的网站（稍后将在响应式阶段进行）。然而，我认为我的问题适用于使用Susy作为静态或流体布局。

这是我的全局设置：

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

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

我想给容器应用一些左右填充，这样当视口在移动设备上变窄时，两侧就会有一点呼吸空间。

最好的方法是什么？如果我只是在我的容器元素中应用padding-left和padding-right（在普通CSS中），这会破坏网格。容器不再足够宽以包含Susy的列宽计算。

我在我的CSS中普遍设置了“box-sizing”为“border-box”。如果我在我的容器元素上覆盖此设置，使用“content-box”，则网格将正确工作。实际上，我本来期望相反的结果？

解决方案是将“box-sizing：content-box”应用于我的容器元素吗？还是我错过了Susy中可以应用的设置？我觉得可能有。如果可能的话，我宁愿让Susy处理所有网格计算。

我的问题也适用于响应式/流体设计，即使我为容器设置了特定的宽度并删除了“column-width”和“math”设置，我仍然面临同样的问题。

- Dave Foy

Answer 1

此时，将content-box设置为容器并添加自定义填充是最好的方法。虽然对于大多数情况来说border-box更加合理，但在某些情况下使用content-box是有意义的，在我看来，这是一个很好的例子。它能够工作是因为Susy正在设置您的容器宽度，而您的填充添加到其中，而不是被减去的，这意味着您仍然拥有所需的网格间距。

我愿意考虑再次添加grid-padding功能，但在Susy 1中，似乎它引起了比解决的问题还要多的问题。我必须思考更好的解决方法。如果您有想法，我会一直关注！

- Miriam Suzanne

---

谢谢Eric。在看到你的回复之前，我实际上正要添加一条评论：“换句话说，$grid-padding在Susy 2.0中有什么等效物？” - Dave Foy

我有一个类似的问题。我在页面上使用多个容器，并且手动为每个容器添加填充似乎不够DRY。是否有一种方法可以在全局级别指定它？或者我最好为container() mixin创建一个包装器？ - Slava Fomin II

Susy没有内置它。您可以创建一个共享类，只需共享变量或包装container mixin。 - Miriam Suzanne

@EricMSuzanne 有没有办法让Susy支持使用CSS的calc(...)函数作为容器宽度参数？这样我们就可以只使用例如calc(100% - 20px)并设置margin: 0 auto来居中，这样我们每边就有10像素（请参见我的答案）。 - herman

但我不明白这比更改“box-sizing”好在哪里。这正是“content-box”设计的用例。没有理由不使用它。 - Miriam Suzanne

Answer 2

对于网格内边距，我通常会这样做。非常好用，没有进一步复杂化的必要 :)

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

- Zell Liew

---

是的，但是当你这样做时，网格（在显示为背景辅助程序时）会在调整大小时逃脱，然后按下F5键后它会再次回到原位。然而，在Susy中通常不会发生这种情况。 - branquito

Answer 3

通常，您需要向为您提供静态站点的容器添加关键字“static”，但是您需要在设置中包括“math: fluid”，以便为您提供基于百分比的站点。否则，正如您在问题中提到的那样，“容器不再足够宽以容纳Susy列宽计算”。 Susy设置 您仍然可以创建基于border-box的站点。在设置中添加global-box-sizing：border-box。您还需要将“math：static”更改为“math：fluid”，以使所有单位均为百分比。 Border Box Include 在@suzy设置之外添加“@include border-box-sizing;”。您可能需要使用“@import“compass”;”导入compass。 容器 你需要在参数中包含“static”。容器采用“layout”参数（http://susydocs.oddbird.net/en/latest/toolkit/#container）。 “layout”变量由关键字组成（http://susydocs.oddbird.net/en/latest/shorthand/#shorthand-layout）。 “keywords”包括“static”（http://susydocs.oddbird.net/en/latest/shorthand/#term-keywords）。

完整示例

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: fluid,
 global-box-sizing: border-box,
 gutters: 1/3
);

@include border-box-sizing;

.container {
     @include container(static);
     padding: 1%;
}

现在可以向容器或任何其他元素添加填充，而不会破坏网站。

- Erik Markhauser

---

很抱歉，但这个答案是不正确的。如果您使用流体数学将Susy值转换为百分比，然后使用border-box，网格内的百分比将基于容器没有任何填充的假设，因此其中所有值都会稍微偏离。容器上需要使用content-box来保持正确的尺寸。 - ividyon

Answer 4

如果您可以接受在相同模式（相对或固定）中添加一些边距，就可以减小容器的宽度并使用margin: 0 auto将其居中于其父级。

像这样，在每侧增加5%的填充：

.my-container {
    @include container(90%);
    margin: 0 auto;
}

如果Susy支持CSS函数作为容器宽度，即使使用相对容器宽度，您也可以使用固定像素数量，例如每侧10px：

.my-container {
    @include container(calc(100% - 20px));
    margin: 0 auto:
}

很遗憾，那样做不起作用。当然，如果您可以在容器周围添加一个包装器div，您可以在那里设置宽度和边距，并使用container(100%)。

- herman