5

在我最大的桌面视图/断点中，我尝试完成与 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;

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

更新： 我首先将我的网站重新安排到移动设备上，并认为我得到了整个 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; 
    } 
}

不知何故，整个网格设置被遗漏了？

更新 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 和填充。但现在一切似乎都很好并且工作正常。;) 花了一段时间。干杯河

4

1 回答 1

5

%单位和squishmixin 都对你不利。默认情况下，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;
}

其他任何事情都只是使事情变得过于复杂。

于 2013-07-22T06:27:48.987 回答