Dynamische Hintergrundbilder in SASS mittels Zufallsauswahl
Um die visuelle Attraktivität einer Website zu verbessern, ist es üblich, Hintergrundbilder einzubinden. Wenn Sie Ihren Designs jedoch einen Hauch von Variabilität verleihen möchten, kann die zufällige Auswahl von Bildern aus einer Liste mithilfe von SASS eine leistungsstarke Technik sein.
Ziel:
Generieren SASS-Code zum zufälligen Auswählen eines Hintergrundbilds aus einer vorgegebenen Liste und zum Einfügen in ein CSS Selektor.
Lösung:
In neueren Versionen von SASS bietet die Funktion random() die Möglichkeit, Zufallszahlen zu generieren. Durch die Kombination mit einer Liste von Bild-URLs, die in einer Variablen gespeichert sind, können Sie dynamisch ein Hintergrundbild für Ihre CSS-Regeln auswählen.
Betrachten Sie das folgende Beispiel:
$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);
}In diesem Beispiel Eine Liste von Bild-URLs wird in der Variablen $image-list gespeichert. Die Funktion random() wird verwendet, um eine zufällige Ganzzahl zwischen 1 und 5 (der Länge der Liste) zu generieren. Die Funktion nth() wird verwendet, um die Bild-URL am angegebenen Zufallsindex zu erhalten.
Das kompilierte CSS fügt die zufällig ausgewählte Hintergrundbild-URL in die Eigenschaft „Hintergrundbild“ des angegebenen CSS-Selektors ein. Dieser Code stellt sicher, dass bei jeder SASS-Kompilierung ein anderes Hintergrundbild verwendet wird.
Überlegungen:
Es ist wichtig zu beachten, dass der Zufallswert nur während Sass generiert wird Zusammenstellung. Das bedeutet, dass das Hintergrundbild bis zur erneuten Kompilierung des SASS gleich bleibt, unabhängig von den Seitenaufrufen.
Das obige ist der detaillierte Inhalt vonWie wähle ich Hintergrundbilder in SASS zufällig aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
