SASS を使用して CSS の背景画像をランダムに選択するにはどうすればよいですか?

SASS を使用した背景画像のランダム化

リストからランダムに選択された背景画像を含む CSS を出力する必要がある場合、SASS は効果的なソリューションを提供します。 Sass v3.3.0 のランダム関数の導入により、このランダムな選択を簡単に実現できます。

実装

ランダムな背景画像の選択を実装するには、次のようにします。画像のリスト ($list) とランダムな変数 ($imgKey) を定義する必要があります。 function:

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;

CSS で、nth() 関数を使用して、ランダム化されたキーに基づいて適切な画像を選択します:

#footer-widgets .container .row {
    background-image: url("/images/#{$nth($list, $imgKey)}.jpg");
    ...
}

ライブ サンプル

このテクニックを確認するには、http://sassmeister.com/gist/8966210 のライブサンプルにアクセスしてください。

注: ランダム値は Sass がコンパイルされるときにのみ変更され、ページがアクセスされるたびに変更されるわけではないことに注意してください。

以上がSASS を使用して CSS の背景画像をランダムに選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。