susy grid background display

Question

I am unable to get the susy-grid-background mixin to display my grid. I have set the grid related variables to true and supplied a grid color, but no matter what I do the grid does not show.

If I run demo code from the Susy website, the grid shows as expected. What am I missing?

    .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

I was able to solve this issue by rearranging the import statements. toolkit and bourbon must create some conflict or overwrite something that makes the susy grid show. To get the grid to show I changed the order of the imports to:

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