Question

我正在使用Susy框架并且非常享受它。但是我增加了额外的利润，我有一个小问题。这是我正在尝试创建here的一个工作示例。什么导致了英雄的孩子们的额外利润_关于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

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

使用Susy删除额外的保证金

2 个答案: