0

私は最近、プロジェクトの背景画像の css のみの画像プリロードを使い始めました。

//preload images
body:after{  
    display: none;
    content: url(img01.png) url(img02.png);
}

//use images
li.one { background-image: (img01.png) }
li.two { background-image: (img02.png) }

私は SCSS から CSS ファイルを作成していますが、SASS を使用してファイルを実行し、ファイル全体の背景画像 URL からプリロードした後に body:after を作成する方法があるかどうか疑問に思っていましたか?

そうでない場合、CSS ファイルのコンパイル後に正規表現を使用してこの手順を実行するスクリプトを作成するのが最善の解決策でしょうか?

4

2 に答える 2

2

@yorbroソリューションはこの特定のケースで機能しますが、関数のみを使用してこの2つのことを一度に実行し、画像パスを $preload-images リストに追加して値を返す方がよいと思います。preload-img()関数は次のとおりです。

// This declare a list variable to store all images to preload
$preloaded-images: ();

// This function will append the image or images to $preload-images and returns img path values
@function preload-img($img-path) {
    $output: ();
    @each $img in $img-path {
        $preloaded-images: append($preloaded-images, url($img));
        $output: append($output, url($img), comma);
    }
    @return $output;
}

この関数を使用すると、background または background-image プロパティを使用でき、複数の画像パスを渡して複数の背景を作成できます。@yorbro が言うようbody:afterに、CSS 全体の最後に追加する必要があります。

// Use images, you can use background or background-image
// Note that you can pass a list of paths to preload-image function
li.one { background: preload-img("img01.png" "img02.png"); }
li.two { background-image: preload-img("img02.png"); }

//preload images
body:after{
    display: none;
    content: $preloaded-images;
}
于 2013-12-09T16:20:11.217 に答える
1

そのために、SASS mixin、関数、およびリストを使用できます。最初に、プロパティを追加し、イメージを SASS リストにbackground-image追加するmixin を作成します。background-imagepreload-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 はいくつかの点で制限がありますが、それでもこの種の素晴らしいことを実現するのに十分強力です!

于 2013-12-08T14:43:26.957 に答える