用 Susy 去除多余的边距

Question

我正在使用 Susy 框架并且非常喜欢它。但是我对增加的额外边距有一个小问题。这是我正在尝试创建here 的工作示例。是什么导致 hero__about div 的孩子的额外边距，我该如何解决？

HTML

<div class="hero">

    <div class="grid">

        <div class="hero__image"></div>

        <div class="hero__summary">

            <h1 class="hero__heading"></h1>
            <p class="hero__text"></p>

            <div class="hero__about">

                <div class="hero__about__education">
                       <h3></h3>
                       <p></p>
                </div>

                <div class="hero__about__interest">
                      <h3>Interest</h3>
                      <p></p>
                </div>

                <div class="hero__about__email">
                      <h3>Say Hello</h3>
                      <p></p>
                </div>

            </div>

        </div>  

    </div>

</div>

SCSS

$susy: (
  columns: 16,
  global-box-sizing: border-box,
  debug: (image: show),
  gutters: 20px/40px,
  gutter-position: split
);

.grid{
  @include container(960px);
 }


.hero{
  .hero__image{
    @include span(4 of 16);
   }

   .hero__summary{
    @include span(12 of 16 last);
   }

   .hero__about__education{
     @include span(12 of 12);
   }

  .hero__about__interest{
    @include span(6 of 12);
  }

  .hero__about__email{
    @include span(6 of 12);
   }
 }

Answer 1

如果您使用分隔排水沟，则需要在嵌套时通知 Susy。您可以将 nest 关键字传递给父级，以删除那些多余的排水沟。

.hero__summary{
  @include span(12 of 16 last nest);
}

内部排水沟的工作方式相同。如果您不想设置宽度，可以使用 inside 而不是 inside-static。另外值得注意的是，在这种情况下，设置 column-width 不应破坏您的布局。这可能是一个误导性的名称，因为它实际上根本不会影响您的列，除非您还设置了math: static。

Answer 2

你可以做排水沟覆盖：

将拆分更改为内部或内部静态。

http://susydocs.oddbird.net/en/latest/settings/#gutter-override

inside-static 似乎有效。我不建议拆分。