2012-04-07 29 views
0

私はicon.scssでこのようなものがあります:コンパススプライトでクラスセレクタを組み合わせる?

$ ICN-スプライトベースクラス: ".icnを"。
@import "icn/*。png";
@include all-icn-sprites;

.blue、弾丸のLi {@include ICN-スプライト(青色のドット)。 }

最後のステートメントは、「セレクタコントロール」がhttp://compass-style.org/help/tutorials/spriting/からインスピレーションを受けています。これは私のicons.cssに私にこのような出力が得られます:

.icnを、-削除.icn、.icnキー、.icnブルードット.blue-弾丸李{ 背景:URL( '/images/icn-s55e477a40b.png')no-repeat; }

.icn-blue-dot { background-position:0 -120px; }

.blue-bullet li { background-position:0 -120px; }
...

あなたが見ることができるように、ブルードットは、その背景位置だけでなく青弾丸李を取得します。両方とも同じバックグラウンドポジションです。思惑通り。しかし、これらの位置を組み合わせることは可能ですか?私ははるかに "特別なセレクタ"を持っていると仮定しましょう、私のCSSはあまりにも大きくなるでしょう。したがって、同一のバックグラウンドポジションを組み合わせるためのソリューションが必要です。私は何か見落としてますか?

だから私のようなもので終わるのが好き:

.icnブルードット、
.blue-弾丸李{
のbackground-position:0 -120px;
}

乾杯

答えて

1

代わりの

.blue、弾丸のLi {@include ICN-スプライト(青色のドット)。 }

を使用でき

.blue-bullet li 
{ 
    @extend .icn-blue-dot; 
}