与苏西一起消除额外的边距

Question

我正在使用Susy框架，真的很喜欢它。但是我对增加的额外边距有一个小问题。这是我在这里尝试创建的工作示例。是什么导致了hero__aboutdiv 子级的额外边距，我该如何解决？

.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>

南海

$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

内部静态似乎有效。我不建议做拆分。