Compass を使用して CSS スプライトを生成しています。
スプライトを一度定義し、それをさまざまな .scss ファイルで使用する方法を見つけましたが、これが正しい解決策かどうかはわかりません。
今まで見つけた最良の方法は次のとおりです。
_variables.scss
部分ファイルを作成する_variables.scss
部分ファイル内でスプライトを定義する_variables.scss
すべての .scss ファイルにパーシャルをインポートする
例
_variables.scss ファイル:
$siteSprite-spacing: 20px;
@import "siteSprite/*.png";
firstPage.scss ファイル:
@import "../variables.scss";
.close {
@include siteSprite-sprite(close, true);
}
secondPage.scss ファイル:
@import "../variables.scss";
.viewMore {
@include siteSprite-sprite(arrow, true);
}
これは機能しますが...
問題は、Compass が scss ファイル (firstPage.scss、secondPage.scss) をコンパイルするたびに、_variables.scss パーシャルを読み取り、すべての画像を読み取り、毎回スプライトを生成しようとすることです。
その結果、コンパイルプロセスは次のようになります。
create generated_images/siteSprite-s526a535d08.png
unchanged generated_images/siteSprite-s526a535d08.png
create css/firstPage.css
unchanged generated_images/siteSprite-s526a535d08.png
create css/secondPage.css
unchanged generated_images/siteSprite-s526a535d08.png
create css/thirdPage.css
unchanged generated_images/siteSprite-s526a535d08.png
siteSprite 画像フォルダー内に多くのページと多くのファイルがあるため、これは非常に低速です。
この問題を回避するにはどうすればよいですか?