SASS：从列表中随机选择背景图像

Posted 2023-03-06

【中文标题】SASS：从列表中随机选择背景图像

【英文标题】：SASS: randomly pick background-image from a list

【发布时间】：2014-03-11 11:33:07

【问题描述】：

我需要输出这个：

#footer-widgets .container .row 
    background-image: url("RANDOMLY PICKED");
    background-position: right bottom;
    background-repeat: no-repeat;

...并且应该有一个包含 4 或 5 个链接到实际背景图像 (http://domain.com/blablabla/image.png) 的列表可供选择。如何使用 SASS 做到这一点？

【问题讨论】：

你明白Sass是先编译的，只有编译好的CSS发送到浏览器，对吧？您可以在每次编译时随机生成背景图像，但不能在每次页面查看时随机生成。

Sass 编译成 css。我从未听说过 css 中的随机 url，因为它的风格不是逻辑。最好的解决方案（如果您正在寻找按视图随机选择）是css-tricks.com/snippets/php/randomize-background-image。如果您想要一个按编译或按页面的随机图像，您可能需要返回并查看您的网站设计和消息传递，以确保您真正想要的是随机选择的图像。

【参考方案1】：

最新版本的 Sass (v3.3.0) 增加了一个新的 random 函数。如果将其与图像列表（以及少量变量插值）混合使用，则每次编译 Sass 时都会获得带有随机选择的背景图像的 CSS。示例：

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

body 
  background-image: "/images/#$nth.jpg";

现场示例：http://sassmeister.com/gist/8966210

如上，随机值只会在编译Sass时发生变化，不一定是每次访问你的页面时。

【讨论】：

谢谢，马上试试。那么什么时候编译呢？

每次更改 Sass 时，在实时示例中或如果您正在做 sass watch。

如果有人想知道nth 做了什么，它是内置的：sass-lang.com/documentation/Sass/Script/…

您可以使用 length 函数，而不是硬编码值 5。如果您使用的是地图而不是列表，则可以先使用map-values 将其转换为列表。