1

susy-grid-background mixin でグリッドを表示できません。グリッド関連の変数を true に設定し、グリッドの色を指定しましたが、何をしてもグリッドが表示されません。

Susy の Web サイトからデモ コードを実行すると、グリッドは期待どおりに表示されます。私は何が欠けていますか？

    .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%));                
                }
            }
        }
    }
4

1 に答える 1

0

インポートステートメントを再配置することで、この問題を解決できました。toolkitとbourbonは、いくつかの競合を作成するか、susy グリッドを表示する何かを上書きする必要があります。グリッドを表示するために、インポートの順序を次のように変更しました。

@import "compass/reset";
@import "toolkit";
@import "susy";
@import "bourbon";
于 2013-04-01T11:33:40.143 に答える