网格大小使用susy

Question

我正在尝试使用susy插件创建一个网格结构，但出于某种原因，我为它获得了额外的空间。

$susy: (
  gutter-position: after,
  container: 1280px,
  container-position: center,
  columns: 14,
  gutters: 0.6,
  global-box-sizing: border-box,
  last-flow: to,
  debug: (image: show),
  // debug: (
  //   image: show,
  //   color: rgba(#ccc, 0),
  //   output: background,
  //   toggle: top right
  // ),
  use-custom: (
    background-image: false,
    background-options: false,
    box-sizing: false,
    clearfix: false,
    rem: false
  )
);


.region {
        @include span(12 of 14);
        @include pre(1);
}

我希望区域div恰好是1140px，当我用截图中附加的这两个额外的网格空间测量它时，它是1140px。我怎样才能删除它们呢？

​

如果我从最右边到最左边测量，网格是1140px，但如果我只开始测量从深粉色到最后一个深粉色边缘，它的1112~1113px。

Answer 1

从documentation for the Susy "debug" feature

网格图像不准确。浏览器在对背景图像进行亚像素舍入时会遇到额外的麻烦。它们用于粗略的调试，而不是像素完美的测量。期望网格图像的" to“侧(如果您的流是ltr，则为右)将偏离几个像素。

当您调整窗口大小时，您会发现当列划分为偶数像素值时，窗口大小偶尔会对齐。

亚像素舍入只是背景图像上的一个问题。这不会影响实际的布局。