수 시티 그리드가있는 가로 목록

Question

수 서리 격자에 맞는 기본 탐색과 같은 안드로이드를 만들고 싶습니다. 그것은 다음과 같습니다

이

코드는 여기 간다 :

HTML :

<div class="container"> 
    <nav> 
     <ul class="horizontal-list"> 
      <li> 
       <a href="#">One</a> 
      </li> 
      <li> 
       <a href="#">Two</a> 
      </li> 
      <li> 
       <a href="#">Three</a> 
      </li> 
      <li> 
       <a href="#">Four</a> 
      </li> 
     </ul> 
    </nav> 
</div> 

SASS :

header.main { 
    height: $headerHeight; 
    background: url('images/headerBackground.gif'); 

    .container { 
     @include container; 
     @include susy-grid-background; 

     nav { 
      @include span-columns(8); 

      ul.horizontal-list { 
       @include horizontal-list; 
       overflow: visible; 

       li { 
        @include isolate-grid(2, 8); 

        padding: 0; 
        display: table; 
        a { 
         // vertical alignment 
         display: table-cell; 
         height: $headerHeight/2; 
         padding-bottom: 2px; 
         vertical-align: bottom; 

         // appearance 
         color: $greyLight; 
         font-size: 18px; 
         text: { 
          transform: uppercase; 
          decoration: none; 
         } 

         // hover 
         position: relative; 
         &:before { 
          content: ''; 
          display: block; 
          width: $headerUnderlineGap; 
          background: $black; 
          height: $headerHeight; 
          position: absolute; 
          top: 0; 
          margin-left: -$headerUnderlineGap + 1; 
         } 

         &:hover { 
          color: $white; 

          &:after { 
           content: ''; 
           display: block; 
           background: $cyanLight; 
           width: 114%; // TODO check why space(2, 8) does not work 
           height: 4px; 
           position: absolute; 
           margin: -1px 0 0 1px; 
          } 
         } 
        } 
       } 
      } 
     } 
    } 
} 

나는 그것이를 설정하는 비트 해키 느낌 &:after 요소의 너비는 114%이 아니라 space(2, 8). 누구든지 Susy 격자와 연속적인 밑줄이있는 수평 탐색을 설정하는 방법을 설명 할 수 있습니다.이 탐색 방법은 다음 li 요소까지 계속 이동합니다.

미리 감사드립니다.

Answer 1

space(2,8)이 경우에는 8이 실제로 컨텍스트가 아니기 때문에 작동하지 않습니다. 2입니다. 단지 space(2,2)이 필요합니다.