Comment sélectionner aléatoirement des images d'arrière-plan dans SASS ?

Images d'arrière-plan dynamiques dans SASS utilisant une sélection aléatoire

Pour améliorer l'attrait visuel d'un site Web, il est courant d'incorporer des images d'arrière-plan. Cependant, si vous souhaitez ajouter une touche de variabilité à vos créations, sélectionner des images au hasard dans une liste à l'aide de SASS peut être une technique puissante.

Objectif :

Générer Code SASS pour choisir au hasard une image d'arrière-plan dans une liste prédéterminée et l'insérer dans un CSS sélecteur.

Solution :

Dans les versions récentes de SASS, la fonction random() offre la possibilité de générer des nombres aléatoires. En combinant cela avec une liste d'URL d'images stockées dans une variable, vous pouvez sélectionner dynamiquement une image d'arrière-plan pour vos règles CSS.

Considérez l'exemple suivant :

$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);
}

Dans cet exemple, une liste d'URL d'images est stockée dans la variable $image-list. La fonction random() permet de générer un entier aléatoire compris entre 1 et 5 (la longueur de la liste). La fonction nth() est utilisée pour obtenir l'URL de l'image à l'index aléatoire spécifié.

Le CSS compilé inclura l'URL de l'image d'arrière-plan sélectionnée au hasard dans la propriété background-image du sélecteur CSS spécifié. Ce code garantit qu'une image d'arrière-plan différente est utilisée à chaque fois que le SASS est compilé.

Considérations :

Il est important de noter que la valeur aléatoire n'est générée que pendant le Sass compilation. Cela signifie que l'image d'arrière-plan restera la même jusqu'à ce que le SASS soit à nouveau compilé, quelles que soient les visites de pages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!