css - 如何在 Susy 中设置最大容器宽度，只有填充/边距在较大的视口(viewport)上保持增长？

Question

在我最大的桌面 View /断点中，我尝试完成与 Susy 演示页面 (http://susy.oddbird.net/demos/magic/) 相同的行为 - 当达到容器最大宽度时，只有每边的填充或边距在容器中增长本身保持其最大宽度。

但我仍然对一些要点感到困惑，例如首选单位以及实现所描述的填充/边距行为的最佳功能是什么。

目前我的一般 Susy 设置如下:

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

具体的Scss部分是这样的。我已经包含了一个容器，并通过挤压在它的两侧留有边距:

.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;

但也没有运气。任何提示表示赞赏。最好的问候拉尔夫

更新:我已经将我的网站重新安排到移动设备上，并认为我得到了整个 Susy 网格概念，起初它有点被 squish() 事件误导了。 :s 但不知何故，我想我又做错了什么。

// 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 值。不知何故，我担心这是在我的包装类中修改容器的错误方法？我这边推理的另一个错误？最好的问候拉尔夫

更新 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 函数后有必要设置容器宽度。在另一个例子中，我只是改变了排水沟，这是没有必要的。但这里似乎是。

.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 函数中设置的值没有得到尊重 - 特别是填充值。然后我意识到设置容器宽度只设置最大宽度值。但是要将所有输入的值应用到网格，您必须再次添加容器 mixin，以便使用 maxwidth 和 paddings。但是现在一切似乎都很好并且可以正常工作。 ;) 花了一段时间。干杯河

Answer 1

% 单元和 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;
}

任何其他的东西都只是把事情复杂化了。