Горизонтальный список с сеткой Сьюзи

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; 
          } 
         } 
        } 
       } 
      } 
     } 
    } 
} 

Я чувствую, что это немного Hacky, чтобы установить ширина элемента &:after до 114%, а не space(2, 8). Может ли кто-нибудь сказать мне, как настроить горизонтальную навигацию с сеткой Сьюзи и непрерывную подчеркивание, которая навевает весь путь до следующего элемента li.

Заранее благодарен!

Answer 1

space(2,8) не работает в этом случае, потому что 8 на самом деле не является контекстом: 2 есть. Вам просто нужно space(2,2).