Susy grid background display

Question

Я не могу получить susy-grid-background mixin для отображения моей сетки. Я установил связанные с сетью переменные в true и предоставил цвет сетки, но независимо от того, что я делаю, сетка не отображается.

Если я запускаю демо-код с сайта Susy, сетка отображается как ожидалось. Что мне не хватает?

.contain { 
     @include susy-grid-background; 
     @include container($total-columns); 
     max-width: 62em; 
    } 

    header { 
     @include span-columns(12 omega, 12); 
     padding: 1em; 

     .branding { 
      font-family: RockSaltRegular; 
      font-size: 2em; 
     } 
    } 

    .main[role="main"] { 
     @include span-columns(12 omega, 12); 
    } 

    .content { 
     background: white; 
     border: 1px solid darken($primary, 30%); 
     @include border-radius(1em); 
     @include box-shadow(2px 2px 5px 0 hsla(0, 0%, 0%, 0.35)); 
     padding: 1em; 

     h1 { 
      font-size: 1.5em; 
     } 
    } 

    footer { 
     @include span-columns(12 omega, 12); 
     font-size: 0.75em; 

     &.fixed { 
      bottom: 5em;  
      position: fixed;  
     } 
    } 

    .hero { 
     @include span-columns(12); 
     margin-top: 20%; 

     @include at-breakpoint($iPadPortrait) { 
      @include span-columns(7, 12); 
      @include isolate(3);  
     } 

     .branding { 
      font-family: RockSaltRegular; 
      font-size: 2em; 
      margin: 0 auto; 
      max-width: 6.25em; 
      text-align: center; 

      @include at-breakpoint($iPadPortrait) { 
       font-size: 3em; 
      } 
     } 

     .hero-search { 
      margin-top: 1em; 
      text-align: center; 

      input[type=text], 
      input[type=search] { 
       border: 1px solid white; 
       @include border-radius(1.5em); 
       margin: 1em 0 2.5em; 
       padding: 1em; 
       width: 100%; 
       -webkit-appearance: caret; 
      } 

      button { 
       background: rgb(157, 151, 139); 
       border: 2px solid rgb(157, 151, 139); 
       @include border-radius(1.5em);   
       @include box-shadow(2px 2px 5px 0 hsla(0, 0%, 0%, 0.35)); 
       color: white; 
       font-size: 1em; 
       min-width: 4em; 
       padding: 0.5em 1.5em; 
       text-transform: uppercase; 

       &:hover { 
        @include linear-gradient($secondary, set-lightness($secondary,10%));     
       } 
      } 
     } 
    } 

Answer 1

Я смог решить эту проблему, изменив инструкции импорта. toolkit и bourbon должны создать конфликт или перезаписать что-то, что делает сетчатое шоу susy. Чтобы показать сетку, я изменил порядок импорта:

@import "compass/reset"; 
@import "toolkit"; 
@import "susy"; 
@import "bourbon";