0

Foundation 4 フレームワークを使用していますが、マージンがフレームワークのマージンによって上書きされるという問題に遭遇しました。これは、!important キーワードを使用しないと特定の要素にマージンを適用できないことを意味します。

以下は、モバイル ブラウザーのレイアウト グリッドを適用する _grid.scss ファイルです。

%row {
    @include grid-row;
}

%columns-1 {
    @include grid-column(1);
}

%columns-2 {
    @include grid-column(2);
}

%columns-3 {
    @include grid-column(3);
}

%columns-4 {
    @include grid-column(4);
}

%columns-5 {
    @include grid-column(5);
}

%columns-6 {
    @include grid-column(6);
}

%columns-7 {
    @include grid-column(7);
}

%columns-8 {
    @include grid-column(8);
}

%columns-9 {
    @include grid-column(9);
}

%columns-10 {
    @include grid-column(10);
}

%columns-11 {
    @include grid-column(11);
}

%columns-12 {
    @include grid-column(12);
}

header {
    @extend %row;

    #branding {
        @extend %columns-6;
    }

    #main-navigation {
        @extend %columns-6;
        position: absolute;
        top: 0;
        left: 0;
    }

    #mobile-navigation-toggle {

    }
}

#games-list {
    @extend %row;
}

#blog-entries {
    @extend %row;

    .entry {
        @extend %row;

        img {
            @extend %columns-4;
        }

        .entry-blurb {
            @extend %columns-8;
        }
    }
}

footer {

    #footer-links {
        @extend %row;

        .link-block {
            @extend %columns-6;
        }
    }
}

base.scss ファイル内の影響を受ける行は次のとおりです。

.entry {
margin-bottom: 10px;

.entry-blurb {
    .entry-description {
    display: none;
        }
}
}

!important を適用した場合にのみ機能します。Web Dev Tools を見ると、問題はわかりますが、解決方法がわかりません:

ここに画像の説明を入力

コードの肥大化を避けるために、グリッドの SASS でプレースホルダーを定義しているため、問題が発生している可能性があると思います。通常は mixin を使用し、コードは CSS の要素内に直接含まれ、その要素のマージンを上書きします。

4

1 に答える 1

0

ここでは、拡張とミックスインの違いはありません。あなたのセレクターは、そのような単純なセレクターでオーバーライドするには特異性が高すぎます: #blog-entries .entryのより具体的なインスタンスです.entry。

いくつかのオプションがあります:

  • #blog-entries .entryセレクターをネストしないでください (最初のような強力なセレクターを持つことを避けます)
  • 2 番目のセレクターに最初のセレクターと同じ (またはそれ以上) の特異性を持たせる
  • 使用する!important
于 2013-05-24T12:28:28.140 に答える