grid - 使用 Susy 接下来如何创建带有固定排水沟的流体柱的网格

Question

如何使用 Susy Next 设置包含流体柱和固定排水沟的网格？

看来Gutter Position是正确的选择，提供了两种使用间距填充的设置See Docs :

inside
Gutters are added as padding on both sides of a layout element, and are not removed at the edges of the grid.

inside-static
Gutters are added as static padding on both sides of a layout element, even in a fluid layout context, and are not removed at the edges of the grid.

但是，我没有成功使用它。据我所知，文档中没有提到如何使用它，因此以下内容似乎是合乎逻辑的:

$default-layout: (
  global-box-sizing: border-box,
  columns: 12,
  container: rem-calc(1000),
  gutter-position: inside-static, // Same with `static`
  gutters: rem-calc(20)
);

但是，一旦使用 @include span() 就会导致错误:

Invalid null operation: "12 times null".

我尝试添加显式列宽:

  column-width: 8.333333333%,

我知道有一些 mixins 用于手动添加前缀和后缀填充，但我希望将其作为适用于所有范围的全局设置。

本质上我正在寻找与此相当的东西(但有 12 列):

.wrapper
{
  width:100%;
  float:left;
}

.column
{
  width: 25%;
  float: left;
  padding: 20px;
  box-sizing: border-box;
}

Codepen Here

注意:我知道 this question ，但它引用了 Susy 1。

Answer 1

我找到了helpful Issue在 Susy 的 Github 上，链接到 Sassmeister包含我所追求的示例。

以下内容对我有用:

$gutter-width: rem-calc(10);
$pointless-column-width: rem-calc(1);

// Default layout
$default-layout: (
  global-box-sizing: border-box,
  columns: 12,
  container: rem-calc(1000),
  gutter-position: inside-static,
  column-width: $pointless-column-width,
  gutters: $gutter-width/$pointless-column-width
);

$susy: $default-layout;

我不明白为什么需要设置列宽，并且它的实际值似乎根本没有效果(只要它不为空或零)。它只需要存在即可。

更多内容Github issue我筹集了包括 Sassmeister .