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系统上的装订位置

1 个答案: