Susy로 여분의 여백 제거

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

당신은 시궁창 오버라이드 (override) 할 수 있습니다 : 내부 또는 내부 정전기 중 하나에

변경 분할.

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

은 내부에 정전기 작동하는 것 같다. 나는 스플릿을하는 것을 권장하지 않는다.

Answer 2

스플릿 거터를 사용하는 경우 Susy가 둥지를 틀 때 알려야합니다. 여분의 거터를 제거하기 위해 부모에게 전달하는 nest 키워드가 있습니다.

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

내부 도랑은 같은 방식으로 작동합니다. 너비를 설정하지 않으려면 inside-static 대신 inside을 사용할 수 있습니다. 또한 column-width을 설정하면이 경우 레이아웃이 손상되지 않습니다. math: static도 설정하지 않으면 실제로 열에 영향을주지 않으므로 잘못된 이름 일 수 있습니다.