susy-compass - 在数学 :static mode 中无法使用 '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,
  )
);

样式.scss>

    @import "grids";

body{
    @include container($susy);
    max-width: 1200px;

    border: solid thin red;
    height:10px;

}

Answer 1

您需要根据列按比例指定装订线。

在这种情况下:

gutters: 1/9,

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

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

gutters: 10px/90px

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

所以有:

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

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

显示其工作状态的笔 here .

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

12 列 * 90 像素 = 1080 像素

11 个装订线 * 10 像素 = 110 像素。

1180 像素 + 110 像素 = 1190 像素。