Bagaimana untuk Memilih Imej Latar Belakang Secara Rawak dalam SASS?

Imej Latar Belakang Dinamik dalam SASS Menggunakan Pemilihan Rawak

Untuk meningkatkan daya tarikan visual tapak web, adalah perkara biasa untuk menggabungkan imej latar belakang. Walau bagaimanapun, jika anda ingin menambah sentuhan kebolehubahan pada reka bentuk anda, memilih imej secara rawak daripada senarai menggunakan SASS boleh menjadi teknik yang hebat.

Objektif:

Jana Kod SASS untuk memilih imej latar belakang secara rawak daripada senarai yang telah ditetapkan dan memasukkannya ke dalam CSS pemilih.

Penyelesaian:

Dalam versi terbaru SASS, fungsi rawak() menyediakan keupayaan untuk menjana nombor rawak. Dengan menggabungkan ini dengan senarai URL imej yang disimpan dalam pembolehubah, anda boleh memilih imej latar belakang secara dinamik untuk peraturan CSS anda.

Pertimbangkan contoh berikut:

$image-list: (
  "url(domain.com/blablabla/image1.png)",
  "url(domain.com/blablabla/image2.png)",
  "url(domain.com/blablabla/image3.png)",
  "url(domain.com/blablabla/image4.png)",
  "url(domain.com/blablabla/image5.png)"
);

$random-image: random(length($image-list));

#footer-widgets .container .row {
  background-image: nth($image-list, $random-image);
}

Dalam contoh ini, senarai URL imej disimpan dalam pembolehubah $image-list. Fungsi rawak() digunakan untuk menjana integer rawak antara 1 dan 5 (panjang senarai). Fungsi nth() digunakan untuk mendapatkan URL imej pada indeks rawak yang ditentukan.

CSS yang disusun akan memasukkan URL imej latar belakang yang dipilih secara rawak dalam sifat imej latar belakang bagi pemilih CSS yang ditentukan. Kod ini memastikan imej latar belakang yang berbeza digunakan setiap kali SASS disusun.

Pertimbangan:

Adalah penting untuk ambil perhatian bahawa nilai rawak hanya dijana semasa Sass kompilasi. Ini bermakna imej latar belakang akan kekal sama sehingga SASS disusun semula, tanpa mengira lawatan halaman.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Imej Latar Belakang Secara Rawak dalam SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!