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

我能够通过重新排列import语句来解决这个问题。 toolkit和bourbon必须创建一些冲突或覆盖使得可疑网格显示的内容。要显示网格，我将导入的顺序更改为：

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

susy网格背景显示

1 个答案: