在数学：静态模式下无法在"px"中使用装订线

Question

我想创建一个固定的不灵活的非常该死的1200px静态网格。所以我发现，我需要 90px 的列宽、12 列、10px 的装订线和 1200px 的最大宽度。

好吧..以下是我的设置，它给了我一个错误"无效的空操作：11 倍空">

$susy: (
  flow: ltr,
  math: static,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 12,
  gutters: 10px,
  column-width: 90px,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: show,
    color: rgba(#66f, .25),
    output: overlay,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

style.scss>

    @import "grids";
body{
    @include container($susy);
    max-width: 1200px;
    border: solid thin red;
    height:10px;
}

Answer 1

您需要按

列的比例指定装订线。

在这种情况下：

gutters: 1/9,

最终结果(即您的列 90px(将是 10px 宽的排水沟。您可以通过以像素为单位指定装订线宽度，将其表示为比例。

根据文档，您可以通过放置列宽来以像素为单位指定装订线宽度。 例如：

gutters: 10px/90px

虽然结果完全一样。如果您输入的值与您的列宽不匹配，您将不会得到您所说的像素宽度，而是适当的分数。

所以有：

column-width: 100px,
gutters: 10px/50px,

会给你留下 20px 宽的排水沟。因为数学。 :)

笔显示它在这里工作。

最后，您的布局宽度为 1190px 而不是 1200px，因为：

12 列 * 90px = 1080px

11 个排水沟 * 10px = 110px。

1180px + 110px = 1190px。