Susy Grid 系统上调试模式和隔离装订线位置的问题

Question

我试图查看 Susy 上的调试模式以了解网格如何工作并弄清楚我们是否有问题，但是当我将其添加到我的 susy-config 时它没有显示调试模式。

我使用的是 2.2.12 版。这是我在 _variables.scss:

上的代码

$susy: (
  column-width: 45px,
  columns: 12,
  container-position: center,
  container: auto,
  global-box-sizing: border-box,
  gutter-position: after,
  gutters: 18px / 45px,
  math: static,
  output: isolate,
  debug: (
    image: show,
    color: rgba($debugg-color, .2),
    output: background,
  )
);

$susy-desktop: (
  column-width: 67px,
  columns: 12,
  container-position: center,
  container: auto,
  global-box-sizing: border-box,
  gutter-position: after,
  gutters: 30px / 67px,
  math: static,
  output: isolate,
  debug: (
    image: show,
    color: rgba($debugg-color, .2),
    output: background,
  )
);

Image of the full Grid without the debug mode 和添加了 margin-top: -100% 的按钮，因为我们使用 output: isolate.

我们希望第一个按钮 span(2 at 8) 和第二个 span(2 at 10)).

网格覆盖是一个 Chrome 插件（不是 Susy 调试模式），如您所见，它无法按需要工作。

我在我们的按钮中使用这个 Sass：

.btn--full {
  @include span(2 at 8);
  margin-bottom: 28px;

  &.btn--ghost-darkgrey {
    @include span(2 at 10);
  }
}

This is the representation of the buttons without gutter-position: isolate and math: fluid, output: float

所以我们遇到了这个问题：

我们可以看到Susy的调试模式。
如果我们使用隔离模式，按钮会损坏

Answer 1

您的 CodePen 示例中的调试模式似乎工作正常。我分叉了，added a sample $desktop breakpoint。

隔离是 John Albin Wilkins 开发的一种技术，使用负右边距 to help avoid sub-pixel rounding errors。隔离从自然流中移除元素，因此如果您在给定上下文中隔离所有元素，效果最好。您可以通过几种方式解决这个问题：隔离所有段落，使它们不重叠，或者在按钮段落上使用 last（而不是隔离）使按钮向右浮动。

不知道您的标记限制或所需的外观，很难更具体。

如果我遗漏了什么，请告诉我。

Susy Grid 系统上调试模式和隔离装订线位置的问题

Problems with debug mode and isolate gutter-position on Susy Grid system

css

grid

sass

susy