0

このようなものを持つ方法はありますか：

.class1, .class2 {
    background: green;

    :not(.class1) {
        //Only apply to .class2
        background: red;
    }
}

にコンパイル

.class1, .class2 { background: green; }
.class2 { background: red; }

.class2 に独自の別のスタイルを別の場所に持たないようにしています。

4

1 に答える 1

1

いいえ、排他的ではなく、ネストを使用して Sass を包括的にすることのみが可能です。@extend ディレクティブを見ましたか?

%common-styles {
    border: 1px solid;
}

.class1 {
    @extend %common-styles;
    background: green;
}

.class2 {
    @extend %common-styles;
    background: red;
}

これにコンパイルします（ここでの正確な順序はわかりません。現時点ではSassを利用できません）：

.class1 { background: green }
.class2 { background: red }
.class1, .class2 { border: 1px solid }

明らかにあなたが探しているソリューションではありませんが、これは Sass で通常取られるアプローチです。独自の .class2 スタイルを残りのスタイルで維持できない理由はありますか?

.class1, .class2 {
    background: green;
}

.class2 {
    background: red;
}

または、次のようにすることもできます。

.class2 {
    background: red !important;

    &, .class1 {
        background: green;
    }
}
于 2012-09-12T12:01:39.987 に答える