0

これは私を行き詰まらせました。

body クラスに基づいて #page-title に背景画像を追加したいと考えています。

私はコンパイルするのが面倒でした：

body.front #page-title {
background-image: url('front.png');
}

body.blog #page-title {
background-image: url('blog.png');
}

明らかに、実際のコードはより複雑です (そして、実際のコードには明確な画像ではなく background-position が含まれます) が、アイデアは理解できます。ツリー内の各要素には、すでに重要なスタイルが設定されています。

これを実現する最善の方法は何ですか？

どうもありがとう！

編集：まあ、私はうまくいく解決策を見つけました：

body {
/* body attributes */

#page-title { 
/* #page-title attributes */
}

 &.front #page-title {
 /* body.front #page-title attributes */
 }

 &.blog #page-title {
 /* body.blog #page-title attributes */
 }
}

これは適切にレンダリングされますが、各ページ クラスの後に #page-title を再入力するのは間違っているように感じます。どういうわけか、私は生意気な方法に屈していないのではないかと思いますが、より良い解決策 (@import?) が得られるまで、これは機能します。

ありがとう！

4

1 に答える 1

2

SASS を作成する前に、CSS を単純化します。

body に使用しているクラスが .blog と .front だけだとすると、1 つのクラスが多すぎます。デフォルトのクラス (.blog) を設定してから、.front のセレクターを追加してみませんか?

body #page-title {
    background-image: url('blog.png');
}

body.front #page-title {
    background-image: url('front.png');
}

または、デフォルト値を設定してから、クラスを #page-title 要素に追加することもできます。

#page-title {
    background-image: url('blog.png');
}

#page-title.front {
    background-image: url('front.png');
}
于 2013-11-02T01:14:49.660 に答える