如何在Susy中设置最大容器宽度，在较大的视口上只增加填充/边距？

Question

在我的最大桌面视图/断点中，我试图实现与Susy演示页面相同的行为（http://susy.oddbird.net/demos/magic/）- 当容器最大宽度达到时，只有每侧填充或边距增加，而容器本身保持在其最大宽度。但是，我仍然对一些问题感到困惑，例如首选单位以及实现所述填充/边距行为的最佳功能是什么。目前我的一般Susy设置如下：

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

具体的Scss部分看起来像这样。我已经包含了一个容器，并通过squish添加了边距：

.sectionwrap{
    @include container;
    @include squish(3,3);
    @include breakpoint($medium) {
        @include squish(2,2);
    }
    @include breakpoint($small) {
        @include squish(1,1);
    }
}

但问题在于容器和压缩区域都会成比例地增长。可能一个缺陷是使用的单位是百分比？使用em或rem是否更合理？

这意味着当总和达到最大宽度（列数*（列宽+间距宽度））时，理论上只有压缩区域继续增长？但我尝试过并失败了。

我还尝试设置：

$container-width: 1000px;

但是还是没有运气。欢迎提供任何提示。最好的问候，Ralf

更新：我已经重新排列了我的网站，以移动优先为主，并认为我已经完全掌握了Susy网格的概念，尽管一开始被squish()事件误导了一下。但不知何故，我又做错了什么。

// breakpoint variable set for Breakpoint - value is converted to em by Breakpoint
$fivehundred: min-width 500px;   

//basic Susy settings for the initial mobile viewport
$total-columns: 8;  
$column-width: 3em;
$gutter-width: 1em;
$grid-padding: 1em;

//modified Susy setting for a larger viewport
//intentionally chose larger numbers to see a significant change at the breakpoint
$largerviewport: 12,5em,1em,1em;

//the main content area wrapper class where i initially wanted to enlarge the container
//at each breakpoint step by step
.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($largerviewport);
    }
}

一些容器宽度在$fivehundred断点之后仍然保持原始值，而不是$largerviewport的值。我担心在修改包装类中的容器时可能是错误的方式？这是我的另一个推理错误吗？最好的问候Ralf。

更新2： 好的，实际上这很奇怪。我现在尝试了以下Sass代码：

.sectionwrap{
    @include container;
    background-color: red;
    @include breakpoint(500px) {
        @include with-grid-settings(24,7em,4em,1em); 
        background-color: green;
    }
}

返回的CSS看起来像下面这样：

.sectionwrap {
  max-width: 31em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto;
  background-color: red; }
      .sectionwrap:after {
         content: "";
         display: table;
         clear: both; }
  @media (min-width: 31.25em) {
    .sectionwrap {
      background-color: green; 
    } 
}

不知何故，整个with-grid-setting被遗漏了？

更新3： 好的，事情已经解决了。我没有意识到在包含with-grid-settings函数之后设置容器宽度是必要的。在另一个例子中，我只改变了gutter，这是不必要的。但在这里似乎是必要的。

.sectionwrap{
    @include container;
    @include breakpoint($fivehundred) {
        @include with-grid-settings($columns: 12, $width: 3em, $gutter: 1em, $padding: 1em){
                @include set-container-width;
        } 
    }
}

更新4 如果有其他人遇到类似的问题，这可能会很有帮助。我想知道为什么在with-grid-settings函数中设置的值没有被使用，特别是padding值。然后我意识到，set container width只设置max-width值。但要将所有输入的值应用于网格，您必须再次添加container mixin，以便利用maxwidth和填充。但现在一切都很好，正常工作。;)花了一些时间。干杯r。

- rkoller

Answer 1

在使用it技术时，%单位和squish混合物都会对您产生负面影响。Susy默认以与您定义网格的单位相同的单位设置容器的最大宽度。实际上，这些单位只用于此目的。如果您希望最大宽度为px，请使用px定义您的网格。如果您想要使用em，请使用em。 $container-width是默认值的覆盖，因此应该有效。我需要查看您尝试使用该值时的实际代码才能知道出了什么问题。

我建议只需执行以下操作：

$total-columns: 24;
$column-width: 30px; // adjust as needed
$gutter-width: 10px; // adjust as needed
$grid-padding: 0;

.sectionwrap{
  @include container;
}

除此之外，其他的都只是在过度复杂化事情。

- Miriam Suzanne

---

酷，谢谢！没有更多的代码了，我已经粘贴了所有相关的内容！主要问题是压缩！当我将其注释掉时，事情就变得可预测了。我现在明白了它的基本思想。我想我会选择em作为单位。所以最好的方法是将容器放在sectionwrap中，并在每个媒体查询中使用with-grid-settings函数来调整列数、列宽和间距。你认为像断点插件（$breakpoint-to-ems: true;）这样的功能对Susy也有意义吗？我可以在GitHub上发布它。 - rkoller

我现在已经玩了一下。最大的视口现在像描述的那样工作。但是，如果我想要在小视口（如移动设备）上获得类似于Squish的效果，我是否最好在不同的断点上使用不同的网格填充值？例如，在我之前提到的with-grid-settings函数中设置。这是最佳实践吗？ - rkoller

我不确定我理解所有这些问题，但这是一个快速尝试。您可以使用 at-breakpoint() 基于列数的简单更改来创建断点。添加 with-grid-settings 可以处理更复杂的更改。如果您使用 ems 定义网格，则 Susy 将使用 ems 创建断点。我不确定额外的函数会做什么。 - Miriam Suzanne

关于这个函数。它是处理px到em转换的一种舒适方式。如果$breakpoint-to-ems设置为true，您可以将所有断点相关变量以px为单位写下，并且它会自动将它们转换为em。没有什么特别的，只是方便而且我已经习惯了在断点上下文中使用该函数。至于关于Susy的一般问题，我会更新初始帖子。在注释中编写代码效果不太好。;) - rkoller

抱歉，我不小心在你的帖子末尾发布了我的更新。然后我又试图删除它，但是帖子仍然在编辑队列中。非常抱歉！ - rkoller

没问题。with-grid-settings是一个包装器，只影响它所包含的代码。如果你想要改变容器的宽度，那么你只需要在里面重新设置容器的尺寸即可。有时候你不需要这个包装器，有时候你会需要。这不仅仅是Susy要求的，更关键的是你想达到什么效果。 - Miriam Suzanne