複数のスタイルシートにまたがるコンパススプライト画像

Question

異なるスタイルシート間の画像からコンパスがスプライトシートを生成する方法はありますか？

tutorialは、フォルダ内の画像の束からスプライトを生成し、それを1つのスタイルシートで使用することについて語ります。しかし、私には、スプライトシートを使用してすべての私のスタイルシートに次のように使用するために持ってカウンター直感的なようだ：私は別の画像は、各スプライトシート用に設定されていることを好むだろう

@import "icon/*.png"; 
@include all-icon-sprites; 

、その後、いくつかのそれらをマークする方法コンパスがそれらをスプライトに集め、それを反映するようにcssを更新できるようにスプライトを生成するためのものです。

Answer 1

コンパスはディレクトリごとに1つのスプライトしか生成しません。ブラウザでキャッシュできるので、複数のページで使用するとフェッチする必要がありません。あなたは参照したチュートリアルでカバーされているSelector Controlを使い、スプライトを何度も繰り返し使用することができます。

あなたの画像フォルダに4つのアイコンがあることを想像して：

• 画像/アイコン/ apple.png
• 画像/アイコン/ banana.png
• 画像/アイコン/ basketball.png
は、 fruits.sassと呼ばれるスタイルシートで
• 画像/アイコン/ football.png

、あなたはすべてのアイコンをインポートし、のみを使用appleとbananaアイコン。 sports.sassと呼ばれるスタイルシートで

@import "icon/*.png"; 

.fruits 
    .banana 
    +icon-sprite(banana) 
    .apple 
    +icon-sprite(apple) 

、あなたはすべてのアイコンをインポートし、のみbasketballとfootballアイコンを使用。

@import "icon/*.png"; 

.sports 
    .football 
    +icon-sprite(football) 
    .basketball 
    +icon-sprite(basketball) 

コンパイルすると、icon-sjargon1.pngのようなものをという名前のスプライトがimagesに生成されます。

• 画像/アイコン/ apple.png
• 画像/アイコン/ banana.png
• 画像/アイコン/ basketball.png
• 画像/アイコン/ football.png
• 画像/ icon- sjargon1.png

あなたの生成fruits.cssは以下のようになります。

.icon-sprite, 
.fruits .banana, 
.fruits .apple { background: url('/images/icon-sjargon1.png') no-repeat; } 

.fruits .banana { background-position: 0 -20px; } 
.fruits .apple { background-position: 0 0; } 

あなたsports.cssは次のようになります生成：あなたはまた、別のスプライトを別のフォルダに画像を置くことができ

.icon-sprite, 
.sports .football, 
.sports .basketball { background: url('/images/icon-sjargon1.png') no-repeat; } 

.sports .football { background-position: 0 -60px; } 
.sports .basketball { background-position: 0 -40px; } 

Answer 2

。たとえば ：あなたのサイトには、多くのセクションがあり、多分、特定のセクションでは、さまざまなテーマを持っていなければならないとき

@import "themeOne/*.png"; 
@include all-themeOne-sprites; 

@import "themeTwo/*.png"; 
@include all-themeTwo-sprites; 

これは便利です。

最後に一つ...

私は@include all-themeOne-sprites;を持つすべてのスプライト画像を追加することのファンではない、私はそうすることを好む：

@import "themeOne/*.png"; 

.somebox .icon { 
    @include themeOne-sprite(anyIcon); 
} 

そして、あなたは.somebox .iconになりたい場合はanyIcon画像のサイズに合わせて、アイコン名の後ろにtrueパラメータを追加することができます。

.somebox .icon { 
    @include themeOne-sprite(anyIcon, true); 
} 

私はそれが助けてくれることを願っています！