9

我正在使用 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”。如果我在我的容器元素上使用“内容框”覆盖它，则网格的行为正确。实际上我预料到了相反的情况？

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

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

4

4 回答 4

10

目前，设置content-box容器并添加自己的填充是最好的方法。虽然border-box对大多数事情来说更明智，但有时content-box也有道理，在我看来，这是一个很好的例子。它之所以有效，是因为 Susy 正在设置您的容器宽度，而您的填充会增加而不是被减去，这意味着您仍然拥有网格所需的空间。

我愿意再次考虑某种类型的grid-padding功能，但在 Susy 1 中，它似乎造成的问题多于解决的问题。我将不得不考虑更好的方法来做到这一点。如果你有想法，我总是很感兴趣！

于 2014-03-13T21:16:49.037 回答
2

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

.container {
  @include container($susy); 
  padding-left: 15px; 
  padding-right: 15px; 
}
于 2014-07-22T01:28:53.020 回答
0

通常，您需要将关键字“static”添加到为您提供静态站点的容器中，但您需要在设置中包含“math:fluid”以根据百分比为您提供站点。否则，正如您在问题中提到的，“容器不再足够宽以包含 Susy 的列宽计算”。

苏西设置

您仍然可以拥有一个基于边框框的网站。将 global-box-sizing:border-box 添加到设置中。您还需要将“数学：静态”更改为“数学：流体”，以便所有单位都以百分比表示。

边框包括

添加“@include 边框大小；” 在@suzy 设置之外。您可能必须在 "@import "compass";" 中包含指南针

容器

您需要包含“静态”作为参数。容器采用“布局”参数（http://susydocs.oddbird.net/en/latest/toolkit/#container）。“布局”变量由关键字（http://susydocs.oddbird.net/en/latest/shorthand/#shorthand-layout）组成。“关键字”包括“静态”（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%;
}

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

于 2015-05-21T18:33:27.623 回答
0

如果您可以在与容器宽度本身相同的模式（相对或固定）下添加一些边距，您可以减小容器的宽度并使用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%).

于 2015-08-28T10:28:18.570 回答