使用较少 css 的增量文件名

Question

我正在尝试使用 less 为一组窗口创建 50 个背景图像。

这些图像路径的格式完全相同，但每个窗口的数字仅增加 1。

目前我有以下代码：

window-1{
 background-image: url('/content/images/background-1-window.png')
}

window-2{
 background-image: url('/content/images/background-2-window.png')
}
..
window-50{
 background-image: url('/content/images/background-50-window.png')
}

我想要实现的是使用 less 有效地让变量替换数字，是否可以使用变量和/或 mixins 来做到这一点？

类似：

window-@window-number{
 Background-image: url('/content/images/background-@window-number-window.png')
}

有没有可能做这样的事情？

Answer 1

是的，有可能，请参阅此答案 https://stackoverflow.com/a/15982103/1596547 和 https://github.com/twbs/bootstrap/issues/10990 以获得一些示例代码：

在你的情况下：

.setbackgroundimage(@index) when (@index > 0)
{
    window-@{index}
    {
     background-image: url('/content/images/background-@{index}-window.png');
    }
    .setbackgroundimage(@index - 1);
}

.setbackgroundimage(50);