Question

我试图在Less。

中提供从数组中挑选的随机图像

这是我到目前为止所拥有的：

@images = ['ancora.svg', 'timone.svg', 'corda.svg', 'bussola.svg'];
@randomimage: `images[Math.floor(Math.random() * images.length)]`;

#footer-widgets .container .row {
    background: url("//website.com/path/@{randomimage}") no-repeat scroll right 60px bottom 40px rgba(0,0,0,0);
}

我认为我做了一些语法错误。这是在url（path/@{randomimage}）中调用变量的方法吗？

Answer 1

您可以在下面找到代码的工作示例：

@images: 'ancora.svg', 'timone.svg', 'corda.svg', 'bussola.svg';
@length: length(@images);
@random: `Math.ceil(Math.random() * (@{length}))`;
@randomimage: extract(@images,@random);

#footer-widgets .container .row {
    background: url("//website.com/path/@{randomimage}") no-repeat scroll right 60px bottom 40px rgba(0,0,0,0);
}

请注意＆＃34;数组＆＃34; in Less可以定义为列表，另请参阅：Loop through array of variable names in Less Less list的第一个索引是1

除非您编译Less代码客户端（为每个请求重新编译代码），否则您应该考虑@ Random-User的注释。实际上，编译的CSS是静态的，随机化似乎没有意义。

LESS（CSS）：从数组中选择随机内容

1 个答案: