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

css CSS

十三西门

2020-03-24

我需要输出：

#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？

第3623篇《SASS：从列表中随机选择背景图像》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
Stafan泡芙 2020.03.24

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时更改，而不一定在每次访问页面时更改。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android