使用 Susy Next 如何创建带有固定排水沟的流体列的网格

Question

如何使用 Susy Next 设置具有流体列和固定排水沟的网格？

看起来Gutter Position 是要走的路，它提供了两种使用填充槽填充的设置See Docs：

里面
排水沟作为填充添加到布局的两侧 元素，并且不会在网格的边缘被移除。

内部静态
排水沟作为静态填充添加到两侧 布局元素，即使在流动布局上下文中，也不会被移除 在网格的边缘。

但是，我没有成功使用它。就我所见，文档中没有提到它应该如何使用，所以下面的方法似乎是合乎逻辑的：

$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%,

我知道有用于手动添加前缀和后缀填充的 mixin，但我希望这是一个适用于所有跨度的全局设置。

基本上我追求的是等效的（但有 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

我在 Susy 的 Github 上找到了 helpful Issue，链接到 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;

我不明白为什么需要设置列宽，并且它的实际值似乎根本没有影响（只要它不为 null 或零）。它只需要存在。

我提出的Github issue 中有更多内容，包括Sassmeister。