html - Susy 没有从 $grid-padding 中获取值(value)

Question

我在我的布局 sass 文件中编码了这个，

我正在使用 Susy Grid System，这是我设置的值。

$total-columns: 12
$column-width: 60px
$gutter-width: 20px
$grid-padding: 10px

问题是容器仍然给我一个 940px 的值而不是 960px。

对此有什么解决方案吗？

这是完整 View 。

$show-grid-backgrounds: true

@import "susy"

// For full Susy documentation, visit: http://susy.oddbird.net/tutorial/

$total-columns: 12
$column-width: 60px
$gutter-width: 20px
$grid-padding: 10px

.container
  // Include `container` if this element will contain a grid system.
  @include container($total-columns)
  // Apply our grid background stripes for development.
  @include susy-grid-background

header, #main-content, footer
  // Clearfix for full-width elements
  @include clearfix

Answer 1

我的输出(复制/粘贴您的代码)显示宽度为 940px和 10px 的填充.由于填充被添加到宽度，这是正确的，你有一个最终的 960px容器。如果您使用 border-box模型，其中填充从宽度中减去，Susy 可以为此进行调整，但你必须告诉 Susy。您可以设置 $border-box-sizing变量为 true或使用内置的 border-box-sizing mixin 将边框模型应用于所有元素。参见 the docs了解更多。