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

我需要输出这一：SASS：随机地从列表中选择背景图像

#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做到这一点？

来源

2014-02-12 MultiformeIngegno

你知道Sass是首先编译的，只有编译好的CSS被发送到浏览器，对吗？您可以在每次编译时随机生成背景图像，但不能在每个页面视图中随机生成背景图像。 – cimmanon

Sass编译为css。我从来没有听说过css中的随机url，因为它的风格不是逻辑。最好的解决方案（如果你正在寻找一个随机选择）将是http://css-tricks.com/snippets/php/randomize-background-image/。如果你想要一个per-compile或per-page的随机图像，你可能需要回头看看你的网站和消息传递的设计，以确保你想要的是真正的随机选择的图像。 – AndrewD

最新版本的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

如上，随机值仅当萨斯编译，这并不一定是每一个你的网页被访问时间而改变。

来源

2014-02-12 22:58:23 KatieK

谢谢，很快就会尝试。那么它什么时候编译？ – MultiformeIngegno

每次你改变Sass，在现场的例子或如果你正在做'sass watch'。 – KatieK

如果其他人想知道'nnth'是什么，它是一个内置的：http://sass-lang.com/documentation/Sass/Script/Functions.html#nth-instance_method – mikemaccana

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

回答

相关问题