そのために、SASS mixin、関数、およびリストを使用できます。最初に、プロパティを追加し、イメージを SASS リストにbackground-image
追加するmixin を作成します。background-image
preload-images
/* '$img-path' is in your case 'img01.png' or 'img02.png' */
@mixin background-image($img-path) {
background-image: url($img-path);
$tmp: preload-image($img-path);
}
次にpreload-image
、 list とともに関数を定義します$preloaded-images
。関数がリストに追加url($img-path)
され$preloaded-images
ます。
/* Preloaded images */
$preloaded-images: null;
@function preload-image($image-path) {
$preloaded-images: $preloaded-images url($image-url);
@return $preloaded-images;
}
背景画像を使用するたびに、ミックスインを使用しますbackground-image
。次に、CSS ファイル全体の最後に式を追加しbody:after
ます。式を出力する前に、プリロードされたすべての画像をリストに追加する必要があるため、これは重要ですbody:after
。そう
//use images
li.one { @include background-image("img01.png"); }
li.two { @include background-image("img02.png"); }
//preload images
body:after{
display: none;
content: $preloaded-images;
}
結論: 言語としての SASS はいくつかの点で制限がありますが、それでもこの種の素晴らしいことを実現するのに十分強力です!