Question

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

看起来Gutter Position是可行的方法，提供两种设置，用于为排水沟See Docs添加填充：

内部
  在布局的两侧添加装订线作为填充   元素，并不会在网格的边缘删除。

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

但是，我没有成功使用它。到目前为止，我没有提到应该如何在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%,

我知道有一些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

我在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;

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

此Github issue中的更多内容我提出了Sassmeister。

使用Susy Next如何使用固定装订线创建带有流体柱的网格

1 个答案: