0

@contentメディアクエリを簡素化するために、ミックスイン内で使用しています。ネストされたクラス内で最初の mixin を使用すると、出力が泡立ち、クラスがネストされます。2 番目の例はまったく機能しません (エラーはありません)。ネストが正しく機能していないようです。

これはうまくいきます

// Everything larger than a landscape tablet but less than or equal to the desktop

@mixin desktop-only {

    @media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
        @content;
    }

    .lt-ie9
    {
        @content;
    }
}

これは動作しません

@mixin ie8 {

    .lt-ie9
    {
        @content;
    }

}
4

1 に答える 1

1

あなたのミックスインは私にはうまくいくようです：

.foo {
    @include ie8 {
        color: red;
    }
}

出力は、私が期待するとおりです。

.foo .lt-ie9 {
  color: red;
}

あなたの質問は、ミックスインが間違っている理由について有用な情報を提供していないため、クラスを逆の順序で配置することが必要であると想定します。その場合、ミックスインは次のように記述する必要があります。

@mixin ie8 {
    .lt-ie9 & {
        @content;
    }
}

出力：

.lt-ie9 .foo {
  color: red;
}
于 2013-03-02T18:30:37.297 に答える